/* ============================================================
   ReUse — Design Tokens
   Light-first surface, carbon kao strateški dramatični element,
   molten orange (#f54703) kao definicioni brand accent.
   ============================================================ */

:root {
  /* RAW BRAND COLORS — NE KORISTI U KODU DIREKTNO */
  --raw-gunmetal:      oklch(35.3% 0.001 0);
  --raw-graphite:      oklch(26.5% 0.001 0);
  --raw-carbon:        oklch(20.1% 0.001 0);
  --raw-soot:          oklch(14% 0.002 0);

  --raw-orange:        oklch(64.5% 0.232 36.5);
  --raw-orange-bright: oklch(73.2% 0.193 47.5);
  --raw-orange-deep:   oklch(54% 0.215 36);
  --raw-orange-tint:   oklch(96% 0.04 36);
  --raw-orange-soft:   oklch(92% 0.06 36);
  --raw-orange-glow:   oklch(70% 0.21 40);

  --raw-bone:    oklch(98.5% 0.001 0);
  --raw-paper:   oklch(96.5% 0.002 0);
  --raw-snow:    #ffffff;
  --raw-mist:    oklch(94% 0.002 0);

  --raw-fog:     oklch(85% 0.002 0);
  --raw-stone:   oklch(70% 0.001 0);
  --raw-ash:     oklch(50% 0.001 0);
  --raw-slate:   oklch(38% 0.001 0);

  --raw-success: oklch(58% 0.18 145);
  --raw-warning: oklch(70% 0.17 75);
  --raw-danger:  oklch(58% 0.22 25);
  --raw-info:    oklch(56% 0.18 230);

  /* SEMANTIC TOKENS — KORISTI SAMO OVE */

  /* Surfaces (LIGHT-FIRST) */
  --color-bg:           var(--raw-bone);
  --color-bg-subtle:    var(--raw-paper);
  --color-bg-muted:     var(--raw-mist);
  --color-surface:      var(--raw-snow);
  --color-surface-alt:  var(--raw-paper);

  /* Dark surfaces (strateški) */
  --color-dark:           var(--raw-carbon);
  --color-dark-elevated:  var(--raw-graphite);
  --color-dark-elevated-2: var(--raw-gunmetal);
  --color-dark-deep:      var(--raw-soot);

  /* Text */
  --color-text:        var(--raw-carbon);
  --color-text-muted:  var(--raw-slate);
  --color-text-subtle: var(--raw-ash);
  --color-text-on-dark:        var(--raw-bone);
  --color-text-on-dark-muted:  oklch(75% 0.001 0);
  --color-text-on-dark-subtle: oklch(58% 0.001 0);
  --color-text-on-accent: #ffffff;

  /* Borders */
  --color-border:         var(--raw-fog);
  --color-border-strong:  var(--raw-stone);
  --color-border-subtle:  oklch(92% 0.001 0);
  --color-border-on-dark: oklch(28% 0.001 0);

  /* Form inputs (light) — input bg je suptilno drugačiji od surface da
     se vidi gde se može tipkati; tekst maks kontrast; placeholder muted. */
  --color-input-bg:           var(--raw-snow);
  --color-input-bg-hover:     oklch(99% 0.001 0);
  --color-input-bg-focus:     var(--raw-snow);
  --color-input-bg-disabled:  var(--raw-paper);
  --color-input-border:       var(--raw-fog);
  --color-input-border-hover: var(--raw-stone);
  --color-input-border-focus: var(--raw-orange);
  --color-input-text:         var(--raw-carbon);
  --color-input-placeholder:  var(--raw-ash);
  --color-input-shadow:       inset 0 1px 2px 0 oklch(20% 0 0 / 0.04);

  /* Brand accent */
  --color-accent:         var(--raw-orange);
  --color-accent-hover:   var(--raw-orange-bright);
  --color-accent-active:  var(--raw-orange-deep);
  --color-accent-subtle:  var(--raw-orange-tint);
  --color-accent-soft:    var(--raw-orange-soft);
  --color-accent-glow:    var(--raw-orange-glow);

  /* States */
  --color-success:    var(--raw-success);
  --color-success-bg: oklch(96% 0.05 145);
  --color-warning:    var(--raw-warning);
  --color-warning-bg: oklch(97% 0.04 75);
  --color-danger:     var(--raw-danger);
  --color-danger-bg:  oklch(96% 0.05 25);
  --color-info:       var(--raw-info);
  --color-info-bg:    oklch(96% 0.04 230);

  --color-focus-ring: var(--raw-orange);

  /* SHADOWS — primarni način kreiranja dubine na light bg */
  --shadow-xs: 0 1px 2px 0 oklch(20% 0 0 / 0.04);
  --shadow-sm: 0 1px 2px -1px oklch(20% 0 0 / 0.06), 0 1px 3px 0 oklch(20% 0 0 / 0.08);
  --shadow-md: 0 2px 4px -2px oklch(20% 0 0 / 0.06), 0 4px 6px -1px oklch(20% 0 0 / 0.08);
  --shadow-lg: 0 4px 6px -4px oklch(20% 0 0 / 0.08), 0 10px 15px -3px oklch(20% 0 0 / 0.10);
  --shadow-xl: 0 8px 10px -6px oklch(20% 0 0 / 0.08), 0 20px 25px -5px oklch(20% 0 0 / 0.10);
  --shadow-2xl: 0 25px 50px -12px oklch(20% 0 0 / 0.20);

  --shadow-glow-orange: 0 0 0 1px var(--raw-orange), 0 8px 24px -4px oklch(64% 0.232 36 / 0.4);
  --shadow-glow-orange-strong: 0 0 0 2px var(--raw-orange), 0 12px 32px -6px oklch(64% 0.232 36 / 0.6);
  --shadow-glow-orange-soft: 0 8px 32px -8px oklch(64% 0.232 36 / 0.25);

  --shadow-inner: inset 0 1px 2px 0 oklch(20% 0 0 / 0.05);

  /* RADIUS */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* TYPOGRAPHY */
  --font-display: "Inter", "Geist", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  clamp(2.5rem, 4vw + 1rem, 3.75rem);
  --text-6xl:  clamp(3rem, 5vw + 1rem, 5rem);
  --text-display: clamp(3.5rem, 6vw + 1rem, 6.5rem);

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.15em;

  /* SPACING (4px grid) */
  --space-px: 1px;
  --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;

  --section-pad-y:    clamp(3rem, 6vw, 6rem);
  --section-pad-y-lg: clamp(5rem, 8vw, 8rem);

  --container-max: 1440px;
  --container-pad: clamp(1rem, 3vw, 2rem);

  /* MOTION */
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;
}

/* DARK MODE — opt-in */
:root[data-theme="dark"] {
  --color-bg:          var(--raw-carbon);
  --color-bg-subtle:   var(--raw-graphite);
  --color-bg-muted:    var(--raw-graphite);
  --color-surface:     var(--raw-graphite);
  --color-surface-alt: var(--raw-gunmetal);

  --color-text:        var(--raw-bone);
  --color-text-muted:  oklch(75% 0.001 0);
  --color-text-subtle: oklch(55% 0.001 0);

  --color-border:         oklch(28% 0.001 0);
  --color-border-strong:  oklch(38% 0.001 0);
  --color-border-subtle:  oklch(24% 0.001 0);

  /* Inputs (dark) — bg DUBLJI od fieldset surface (bg=carbon, surface=graphite),
     pa polje "uleže" u karticu i jasno se vidi gde se može tipkati. */
  --color-input-bg:           oklch(16% 0.002 0);   /* između carbon i soot */
  --color-input-bg-hover:     oklch(18% 0.002 0);
  --color-input-bg-focus:     oklch(18% 0.002 0);
  --color-input-bg-disabled:  oklch(22% 0.001 0);
  --color-input-border:       oklch(34% 0.001 0);
  --color-input-border-hover: oklch(45% 0.001 0);
  --color-input-border-focus: var(--raw-orange);
  --color-input-text:         var(--raw-bone);
  --color-input-placeholder:  oklch(55% 0.001 0);
  --color-input-shadow:       inset 0 1px 2px 0 oklch(0% 0 0 / 0.45);

  /* Accent subtle u dark — tamniji tint sa malo orange-a, ne onaj svetli light */
  --color-accent-subtle: oklch(28% 0.06 36);
  --color-success-bg:    oklch(28% 0.07 145);
  --color-warning-bg:    oklch(30% 0.06 75);
  --color-danger-bg:     oklch(28% 0.08 25);
  --color-info-bg:       oklch(28% 0.07 230);

  --shadow-sm: 0 1px 3px 0 oklch(0% 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.5);
  --shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.6);
}