/* ==========================================================================
   tokens.css - Digitalna Agencija Beograd
   Design tokens as CSS custom properties. Source of truth: brand/brand-tokens.json + DESIGN.md
   THEME: DARK NAVY with bright green accent. Real designed dark theme (NOT inverted light).
   Every value here maps 1:1 to a Bricks Global Style / Global Variable.
   Do NOT hardcode colors/sizes/spacing elsewhere - always reference a token.
   ========================================================================== */

:root {
  /* ---- COLOR: navy surfaces (dark theme) ---- */
  --navy-canvas:    #091D42; /* page background */
  --navy-deep:      #06152F; /* deepest surface / footer */
  --navy-surface:   #0B2347; /* cards / panels */
  --navy-surface2:  #0A3967; /* highlighted panels / secondary CTA fill */
  --navy-border:    #1C3560; /* DECORATIVE hairline dividers only */
  --navy-border-hi: #61789C; /* functional input/control border */

  /* ---- COLOR: text on navy ---- */
  --text-white: #FFFFFF; /* headings (16.59:1) */
  --text-100:   #DDE4EC; /* high-emphasis (12.94:1) */
  --text-body:  #AFBDCB; /* body (8.66:1) */
  --text-muted: #8595A6; /* muted / caption (5.41:1) */
  --text-faint: #6A7A8C; /* LARGE / decorative label ONLY */

  /* ---- COLOR: green accent ---- */
  --green-300: #5FE39B; /* bright accent / hover */
  --green-400: #2CD97B; /* PRIMARY CTA / link / accent / focus */
  --green-600: #1FA85D; /* pressed / active on green fills */
  --ink-on-green: #091D42; /* text ON green fills = navy. ALWAYS navy, NEVER white */

  /* ---- COLOR: semantic ---- */
  --success:    #2CD97B; /* navy text on it */
  --warning:    #F2B441; /* amber, navy text */
  --danger-500: #F26A5B; /* danger surface (light), navy text */
  --danger-600: #C43B2E; /* danger fill (dark), white text */
  --info:       #5AB0F0; /* info, on navy */

  /* ---- ROLE tokens (semantic aliases for portability) ---- */
  --color-bg:            var(--navy-canvas);
  --color-surface:       var(--navy-surface);
  --color-surface-2:     var(--navy-surface2);
  --color-footer:        var(--navy-deep);
  --color-heading:       var(--text-white);
  --color-text:          var(--text-body);
  --color-text-strong:   var(--text-100);
  --color-text-muted:    var(--text-muted);
  --color-accent:        var(--green-400);
  --color-accent-hover:  var(--green-300);
  --color-link:          var(--green-400);
  --color-link-hover:    var(--green-300);
  --color-on-accent:     var(--ink-on-green);
  --color-divider:       var(--navy-border);
  --color-border:        var(--navy-border-hi);
  --color-focus:         var(--green-400);

  /* ---- TYPOGRAPHY: families ---- */
  --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, monospace;

  /* ---- TYPOGRAPHY: fluid size scale (ratio 1.25, base 16px) ---- */
  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8rem);
  --text-sm:   clamp(0.875rem, 0.85rem + 0.1vw, 0.9rem);
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --text-xl:   clamp(1.35rem, 1.25rem + 0.5vw, 1.563rem);
  --text-2xl:  clamp(1.6rem, 1.4rem + 1vw, 1.953rem);
  --text-3xl:  clamp(2rem, 1.6rem + 2vw, 2.441rem);
  --text-4xl:  clamp(2.4rem, 1.8rem + 3vw, 3.052rem);
  --text-5xl:  clamp(2.8rem, 2rem + 4vw, 3.75rem);

  /* ---- TYPOGRAPHY: line-height ---- */
  --leading-none:    1.05;
  --leading-tight:   1.18;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-body:    1.65;

  /* ---- TYPOGRAPHY: weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- TYPOGRAPHY: tracking ---- */
  --tracking-heading: -0.01em;
  --tracking-body:     0;
  --tracking-caps:     0.08em;

  /* ---- SPACING (4px base) ---- */
  --space-0:  0;
  --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;
  --space-40: 10rem;

  --section-py: clamp(3rem, 6vw, 6rem);
  --gutter:     clamp(1rem, 4vw, 2rem);

  /* ---- LAYOUT: containers ---- */
  --container-max:   1200px;
  --container-prose: 68ch;
  --measure-body:    66ch;

  /* ---- RADII ---- */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem; /* buttons */
  --radius-lg:   1rem;     /* cards */
  --radius-xl:   1.5rem;
  --radius-pill: 9999px;   /* primary CTA */

  /* ---- SHADOWS (dark theme: deep navy-black) ---- */
  --shadow-xs: 0 1px 2px rgba(3, 10, 24, 0.5);
  --shadow-sm: 0 2px 8px rgba(3, 10, 24, 0.5);
  --shadow-md: 0 8px 24px rgba(3, 10, 24, 0.55);
  --shadow-lg: 0 18px 48px rgba(3, 10, 24, 0.6);
  --shadow-focus: 0 0 0 3px rgba(44, 217, 123, 0.5);
  --shadow-cta-glow: 0 6px 24px rgba(44, 217, 123, 0.35);

  /* ---- MOTION ---- */
  --dur-instant: 75ms;
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ease-state:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Z-INDEX scale ---- */
  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-backdrop: 400;
  --z-modal:    500;
  --z-popover:  600;
  --z-tooltip:  700;
  --z-max:      999;

  /* ---- BREAKPOINTS (documentation; used in media queries) ----
     mobile-first base = 375px+
     --bp-sm:  640px
     --bp-md:  768px
     --bp-lg:  1024px
     --bp-xl:  1200px  (container_max)
     --bp-2xl: 1440px
  */
}