/* =========================================================================
   MRINGCO Design Tokens
   ========================================================================= */

:root {
  /* --- Brand palette --- */
  --color-yellow:       #FFBE00;
  --color-yellow-dark:  #D99E00;
  --color-yellow-light: #FFD04D;
  --color-black:        #0A0A0A;
  --color-surface-1:    #111111;
  --color-surface-2:    #1A1A1A;
  --color-surface-3:    #242424;
  --color-surface-4:    #2E2E2E;
  --color-border:       #333333;
  --color-border-light: #444444;

  /* --- Text --- */
  --color-text-primary:   #F5F5F0;
  --color-text-secondary: #AAAAAA;
  --color-text-muted:     #666666;
  --color-text-inverse:   #0A0A0A;

  /* --- Status --- */
  --color-success: #2ECC71;
  --color-warning: #F39C12;
  --color-error:   #E74C3C;
  --color-info:    #3498DB;

  /* --- Typography --- */
  --font-display: 'Saira Extra Condensed', sans-serif;
  --font-ui:      'Saira', sans-serif;
  --font-body:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* --- Type scale (fluid) --- */
  --text-xs:   clamp(0.65rem,  0.6rem + 0.25vw,  0.75rem);
  --text-sm:   clamp(0.8rem,   0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.9rem,   0.85rem + 0.25vw, 1rem);
  --text-md:   clamp(1rem,     0.95rem + 0.3vw,  1.125rem);
  --text-lg:   clamp(1.1rem,   1rem + 0.5vw,     1.375rem);
  --text-xl:   clamp(1.25rem,  1.1rem + 0.75vw,  1.75rem);
  --text-2xl:  clamp(1.5rem,   1.2rem + 1.5vw,   2.25rem);
  --text-3xl:  clamp(1.875rem, 1.4rem + 2vw,     3rem);
  --text-4xl:  clamp(2.25rem,  1.5rem + 3.75vw,  4.5rem);
  --text-hero: clamp(3rem,     2rem + 6vw,        8rem);

  /* --- Spacing --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Layout --- */
  --container-max:    1280px;
  --container-wide:   1440px;
  --container-narrow: 900px;
  --container-px:     clamp(1rem, 5vw, 2.5rem);

  /* --- Borders & radius --- */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 9999px;
  --border-thin: 1px solid var(--color-border);
  --border-mid:  2px solid var(--color-border);
  --border-accent: 3px solid var(--color-yellow);

  /* --- Shadows --- */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.6);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 20px rgba(255,190,0,0.25);

  /* --- Transitions --- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-xslow:  700ms;

  /* --- Z-indices --- */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* --- Header heights --- */
  --header-top-height:    36px;
  --header-main-height:   72px;
  --header-total-height:  calc(var(--header-top-height) + var(--header-main-height));
  --mobile-nav-height:    60px;

  /* --- Caution stripe (decorative) --- */
  --caution-stripe: repeating-linear-gradient(
    -45deg,
    var(--color-yellow),
    var(--color-yellow) 3px,
    var(--color-black) 3px,
    var(--color-black) 12px
  );

  /* --- Noise texture overlay --- */
  --noise-overlay: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
}