/* ------------------------------------------------------------------
   THE CARV — Design System Tokens
   Tech Inteligente · Equilíbrio Estratégico
   Light theme. Angular. Minimal. Professional.
------------------------------------------------------------------ */

:root {
  /* ── Core Palette ── */
  --carv-ink:       #1e2749;   /* deepest navy — primary brand */
  --carv-navy:      #273469;   /* deep blue — action / accent */
  --carv-slate:     #30343f;   /* graphite — body fg on light */
  --carv-lavender:  #dad9ff;   /* soft accent — surfaces / hover */
  --carv-paper:     #fafaff;   /* off-white canvas */

  --carv-mint:      #2fbf9f;   /* signal / success / live */
  --carv-mint-deep: #1fa37f;   /* mint pressed / focus */

  /* ── Neutral Scale (cool-tinted) ── */
  --carv-n-0:   #ffffff;
  --carv-n-50:  #fafaff;
  --carv-n-100: #f3f3fb;
  --carv-n-200: #e8e8f3;
  --carv-n-300: #d3d3e3;
  --carv-n-400: #a8a9bf;
  --carv-n-500: #74778f;
  --carv-n-600: #53566b;
  --carv-n-700: #3b3e51;
  --carv-n-800: #2a2d3c;
  --carv-n-900: #1e2749;
  --carv-n-950: #141a30;

  /* ── Semantic Surfaces ── */
  --bg:         var(--carv-paper);
  --bg-elev:    #ffffff;
  --bg-muted:   var(--carv-n-100);
  --bg-inverse: var(--carv-ink);

  --fg1:        var(--carv-ink);
  --fg2:        var(--carv-slate);
  --fg3:        var(--carv-n-500);
  --fg-inverse: var(--carv-paper);

  --border:        var(--carv-n-200);
  --border-strong: var(--carv-n-300);
  --divider:       var(--carv-n-200);

  --accent:      var(--carv-navy);
  --accent-hover:var(--carv-ink);
  --accent-soft: var(--carv-lavender);

  --signal:      var(--carv-mint);
  --signal-hover:var(--carv-mint-deep);

  /* ── Status ── */
  --success: #1fa37f;
  --warning: #d39e2a;
  --danger:  #c8425c;
  --info:    var(--carv-navy);

  /* ── Shadows — cool-tinted, low spread ── */
  --shadow-xs:    0 1px 2px rgba(30, 39, 73, 0.06);
  --shadow-sm:    0 2px 6px rgba(30, 39, 73, 0.07);
  --shadow-md:    0 8px 24px -8px rgba(30, 39, 73, 0.14), 0 2px 6px rgba(30, 39, 73, 0.05);
  --shadow-lg:    0 24px 48px -16px rgba(30, 39, 73, 0.22), 0 4px 12px rgba(30, 39, 73, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-focus: 0 0 0 3px rgba(39, 52, 105, 0.18);

  /* ── Radii — restrained, angular ── */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  18px;
  --radius-pill:999px;

  /* ── Spacing (4/8 grid) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── Typography Families ── */
  --font-wordmark: "Michroma", "Saira", system-ui, sans-serif;
  --font-display:  "Space Grotesk", system-ui, sans-serif;
  --font-sans:     "Manrope", "Space Grotesk", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ── Type Scale ── */
  --fs-display:  clamp(48px, 6vw, 88px);
  --fs-h1:       clamp(36px, 4.2vw, 56px);
  --fs-h2:       clamp(28px, 3vw, 40px);
  --fs-h3:       24px;
  --fs-h4:       18px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  12px;
  --fs-eyebrow:  11px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-wordmark: 0.08em;
  --tracking-eyebrow:  0.18em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    360ms;

  /* ── Backwards-compat aliases (used by layout/components/tools) ── */

  /* Palette */
  --clr-bg:         var(--bg);
  --clr-surface:    var(--bg-elev);
  --clr-raised:     var(--bg-muted);
  --clr-accent:     var(--carv-navy);
  --clr-teal:       var(--carv-mint);
  --clr-white:      var(--fg1);
  --clr-light:      var(--fg2);
  --clr-text:       var(--fg1);
  --clr-text-sub:   var(--fg2);
  --clr-text-muted: var(--fg3);
  --clr-text-faint: var(--carv-n-400);
  --clr-gray:       var(--carv-n-300);

  /* Semantic */
  --clr-success:   var(--success);
  --clr-success-t: rgba(31, 163, 127, 0.1);
  --clr-danger:    var(--danger);
  --clr-danger-t:  rgba(200, 66, 92, 0.1);
  --clr-warn:      var(--warning);
  --clr-warn-t:    rgba(211, 158, 42, 0.1);

  /* Shadows */
  --shdw-xs:         var(--shadow-xs);
  --shdw-sm:         var(--shadow-sm);
  --shdw-md:         var(--shadow-md);
  --shdw-lg:         var(--shadow-lg);
  --shdw-xl:         var(--shadow-lg);
  --shdw-inset:      inset 0 1px 3px rgba(30, 39, 73, 0.06);
  --shdw-inset-deep: inset 0 2px 6px rgba(30, 39, 73, 0.09);

  /* Surfaces — solid, no gradients */
  --surf-body:      var(--bg);
  --surf-panel:     var(--bg-muted);
  --surf-card:      var(--bg-elev);
  --surf-raised:    var(--carv-n-100);
  --surf-btn:       var(--carv-navy);
  --surf-btn-teal:  var(--carv-mint);
  --surf-btn-muted: var(--carv-n-200);
  --surf-input:     var(--carv-n-50);
  --surf-nav:       rgba(250, 250, 255, 0.88);

  /* Borders — unified, no bevel */
  --border-subtle:       1px solid var(--border);
  --border-card:         1px solid var(--border);
  --border-input:        1px solid var(--border-strong);
  --border-focus:        1px solid var(--carv-navy);
  --border-top-bevel:    1px solid var(--border);
  --border-bottom-bevel: 1px solid var(--border);

  /* Typography */
  --font: var(--font-sans);

  /* Radius */
  --r-sm:  var(--radius-sm);
  --r-md:  var(--radius-md);
  --r-lg:  var(--radius-lg);
  --r-xl:  var(--radius-xl);
  --r-2xl: 24px;

  /* Transitions */
  --tr:      var(--dur-base) var(--ease-out);
  --tr-slow: var(--dur-slow) var(--ease-out);
}

/* Dark inverse — used for hero / footer sections */
.theme-dark {
  --bg:          var(--carv-ink);
  --bg-elev:     var(--carv-n-800);
  --bg-muted:    var(--carv-n-900);
  --fg1:         var(--carv-paper);
  --fg2:         #c4c6d8;
  --fg3:         #8c90a8;
  --border:      rgba(218, 217, 255, 0.12);
  --border-strong:rgba(218, 217, 255, 0.22);
  --accent-soft: rgba(218, 217, 255, 0.14);

  --clr-bg:         var(--bg);
  --clr-surface:    var(--bg-elev);
  --clr-raised:     var(--bg-muted);
  --clr-text:       var(--fg1);
  --clr-text-sub:   var(--fg2);
  --clr-text-muted: var(--fg3);
  --clr-text-faint: #8c90a8;
  --clr-white:      var(--fg1);

  --surf-body:   var(--bg);
  --surf-panel:  var(--bg-muted);
  --surf-card:   var(--bg-elev);
  --surf-raised: rgba(255,255,255,0.04);
  --surf-input:  rgba(255,255,255,0.05);

  --border-subtle:       1px solid var(--border);
  --border-card:         1px solid var(--border);
  --border-input:        1px solid var(--border-strong);
  --border-top-bevel:    1px solid var(--border);
  --border-bottom-bevel: 1px solid rgba(0,0,0,0.3);
}

@media (max-width: 640px) {
  :root {
    --fs-h3:      20px;
    --fs-body-lg: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}