/* ═══════════════════════════════════════════════════════
   SixTree — Design Tokens (CSS Custom Properties)
   Single source of truth for all design values.
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --color-blueoxford:    #0c0829;
  --color-lemonzest:     #9ada22;
  --color-orange:        #ff8400;
  --color-skymist:       #9eb8f9;
  --color-ivory:         #fefffd;
  --color-amande:        #f9dfc6;
  --color-navylight:     #181240;

  /* ── Brand Colors as RGB channels (space-separated — for Tailwind <alpha-value> pattern) ── */
  --color-blueoxford-ch:  12 8 41;
  --color-lemonzest-ch:   154 218 34;
  --color-orange-ch:      255 132 0;
  --color-skymist-ch:     158 184 249;
  --color-ivory-ch:       254 255 253;
  --color-amande-ch:      249 223 198;
  --color-navylight-ch:   24 18 64;

  /* ── Brand Colors with Opacity (for rgba replacements) ── */
  --color-blueoxford-rgb: 12, 8, 41;
  --color-ivory-rgb:      254, 255, 253;
  --color-skymist-rgb:    158, 184, 249;

  /* ── Border Radius ── */
  --radius-sm:   16px;
  --radius-md:   20px;
  --radius-lg:   24px;
  --radius-xl:   32px;

  /* ── Shadows — Card Default ── */
  --shadow-card-light-default: none;
  --shadow-card-dark-default:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);

  /* ── Shadows — Card Hover ── */
  --shadow-card-light-hover: 0 24px 64px rgba(12, 8, 41, 0.10);
  --shadow-card-dark-hover:  0 20px 50px -12px rgba(12,8,41,0.5), 0 0 30px rgba(158,184,249,0.15);
  --shadow-nav:              0 2px 20px rgba(12,8,41,0.06);
  --shadow-dropdown:         0 8px 24px rgba(12,8,41,0.08);

  /* ── Transitions ── */
  --transition-fast:    0.15s ease;
  --transition-quick:   0.2s ease;
  --transition-line:    0.25s ease;
  --transition-card:    0.3s ease;
  --transition-nav:     0.4s ease;
  --transition-reveal:  0.9s;
  --transition-hero:    1.2s;

  /* ── Spacing (card internals) ── */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;

  /* ── Typography — Font Sizes ── */
  --text-label:    10px;
  --text-tag:      12px;
  --text-body:     14px;
  --text-card-title: 20px;

  /* ── Typography — Font Weights ── */
  --weight-light:      300;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* ── Typography — Letter Spacing ── */
  --tracking-tight:  -0.03em;
  --tracking-wide:    0.1em;
  --tracking-wider:   0.14em;

  /* ── Typography — Line Heights ── */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-relaxed: 1.625;

  /* ── Studio Dark Card Gradient ── */
  --gradient-studio: radial-gradient(
    circle at bottom right,
    rgba(158, 184, 249, 0.30) 0%,
    rgba(158, 184, 249, 0.20) 30%,
    rgba(158, 184, 249, 0.10) 55%,
    rgba(158, 184, 249, 0.03) 80%,
    transparent 100%
  );

  /* ── Glassmorphism (nav) ── */
  --glass-blur:     blur(18px) saturate(160%);
  --glass-bg:       rgba(254, 255, 253, 0.92);

  /* ═══════════════════════════════════════════════════════
     Studio Design Tokens (Tier 1) — Manual de Marca v2.0 + Studio system
     Sem impacto visual nesta entrega; consumidos por primitivos no Tier 2.
     ═══════════════════════════════════════════════════════ */

  /* ── Brand Colors · variants (-wash · -subtle · -strong) ── */

  /* Blueoxford */
  --color-blueoxford-wash:    rgba(12, 8, 41, 0.08);
  --color-blueoxford-subtle:  rgba(12, 8, 41, 0.40);
  --color-blueoxford-strong:  var(--color-navylight);

  /* Lemonzest */
  --color-lemonzest-wash:     rgba(154, 218, 34, 0.12);
  --color-lemonzest-subtle:   rgba(154, 218, 34, 0.40);
  --color-lemonzest-strong:   #82BD1A;

  /* Orange */
  --color-orange-wash:        rgba(255, 132, 0, 0.10);
  --color-orange-subtle:      rgba(255, 132, 0, 0.40);
  --color-orange-strong:      #E07300;

  /* Skymist */
  --color-skymist-wash:       rgba(158, 184, 249, 0.10);
  --color-skymist-subtle:     rgba(158, 184, 249, 0.40);
  --color-skymist-strong:     #7A99E8;

  /* Amande */
  --color-amande-wash:        rgba(249, 223, 198, 0.25);
  --color-amande-subtle:      rgba(249, 223, 198, 0.60);
  --color-amande-strong:      #ECC59E;

  /* Navylight (already a "strong" sibling of blueoxford) */
  --color-navylight-wash:     rgba(24, 18, 64, 0.08);
  --color-navylight-subtle:   rgba(24, 18, 64, 0.40);

  /* Ivory (nearly white; wash for overlays) */
  --color-ivory-wash:         rgba(254, 255, 253, 0.92);

  /* ── New colors (Studio palette extension) ── */

  /* Purple · já hardcoded como ícone Labs; agora tokenizado */
  --color-purple:             #7A5AB5;
  --color-purple-ch:          122 90 181;
  --color-purple-rgb:         122, 90, 181;
  --color-purple-wash:        rgba(122, 90, 181, 0.10);
  --color-purple-subtle:      rgba(122, 90, 181, 0.40);
  --color-purple-strong:      #5F4694;

  /* Wine · destructive (Studio); não usada no site ainda */
  --color-wine:               #8B1A2C;
  --color-wine-ch:            139 26 44;
  --color-wine-rgb:           139, 26, 44;
  --color-wine-wash:          rgba(139, 26, 44, 0.10);
  --color-wine-subtle:        rgba(139, 26, 44, 0.40);
  --color-wine-strong:        #6D1322;

  /* ── Semantic tokens (Studio pattern) ── */

  /* Backgrounds */
  --bg-surface:               var(--color-ivory);
  --bg-card:                  #ffffff;
  --bg-muted:                 var(--color-amande-wash);
  --bg-subtle:                var(--color-blueoxford-wash);

  /* Text */
  --text-primary:             var(--color-blueoxford);
  --text-secondary:           rgba(12, 8, 41, 0.65);
  --text-tertiary:            rgba(12, 8, 41, 0.45);
  --text-on-dark:             var(--color-ivory);
  --text-on-dark-secondary:   rgba(254, 255, 253, 0.70);
  --text-on-dark-tertiary:    rgba(254, 255, 253, 0.45);

  /* Borders */
  --border-default:           rgba(12, 8, 41, 0.12);
  --border-subtle:            rgba(12, 8, 41, 0.06);
  --border-strong:            rgba(12, 8, 41, 0.25);
  --border-focus:             var(--color-blueoxford);

  /* ── Action tokens (consumidos por primitivos no Tier 2) ── */

  --action-primary-bg:        var(--color-lemonzest);
  --action-primary-fg:        var(--color-blueoxford);
  --action-primary-hover-bg:  var(--color-lemonzest-strong);

  --action-secondary-bg:         transparent;
  --action-secondary-fg:         var(--color-blueoxford);
  --action-secondary-border:     var(--border-strong);
  --action-secondary-hover-bg:   var(--color-blueoxford);
  --action-secondary-hover-fg:   var(--color-ivory);

  --action-destructive-bg:            var(--color-wine);
  --action-destructive-fg:            var(--color-ivory);
  --action-destructive-subtle-bg:     var(--color-wine-wash);
  --action-destructive-subtle-fg:     var(--color-wine-strong);
  --action-destructive-subtle-border: rgba(139, 26, 44, 0.25);

  /* ── Radius extras (sm/md/lg/xl já existem acima) ── */

  --radius-xs:    8px;
  --radius-pill:  999px;

  /* ── Shadows · Studio scale (mantém os shadows nomeados existentes acima) ── */

  --shadow-sm:    0 1px 3px  rgba(12, 8, 41, 0.06);
  --shadow-md:    0 4px 12px rgba(12, 8, 41, 0.08);
  --shadow-lg:    0 14px 30px rgba(12, 8, 41, 0.10);

  /* ── Typography · overlines (caps + tracking; usa --font-sans atual) ── */

  --text-overline-sm:           10px;
  --text-overline-sm-weight:    700;
  --text-overline-sm-tracking:  0.14em;
  --text-overline-sm-transform: uppercase;

  --text-overline-md:           11px;
  --text-overline-md-weight:    700;
  --text-overline-md-tracking:  0.18em;
  --text-overline-md-transform: uppercase;
}