/* ═══════════════════════════════════════════════════════════════
 *  arke-tokens.css — FONTE ÚNICA DA VERDADE (arkeCORE)
 *  ---------------------------------------------------------------
 *  Editar tokens de marca SÓ aqui. Consumido por:
 *    • app/globals.css  (via @import — produto arkeCORE)
 *    • páginas /site     (via <link> — produto site)
 *  Default = arkeCORE. Temas por produto ficam em arke-themes.css.
 * ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Tema escuro (default) ─────────────────────────────── */
  --bg:            #000000;
  --surface:       #141414;
  --surface2:      #1E1E1E;
  --surface-hi:    #2A2A2A;
  --border:        #2A2A2A;
  --border-strong: #3A3A3A;
  --text:          #F5F2ED;
  --text-muted:    #9A9590;
  --text-subtle:   #6B6560;
  --sidebar-bg:    #141414;
  --nav-bg:        rgba(20, 20, 20, 0.78);
  --shadow:        0 4px 18px rgba(0, 0, 0, 0.55);

  /* ─── Accent — Ouro filosófico (arkeCORE) ───────────────── */
  --accent:        #C4973A;
  --accent-hover:  #D4A94A;
  --accent-active: #B08832;
  --accent-muted:  #8B7355;
  --accent-soft:   rgba(196, 151, 58, 0.16);
  --accent-softer: rgba(196, 151, 58, 0.08);
  --accent-ring:   rgba(196, 151, 58, 0.32);
  --accent-text:   #D4A94A;
  --accent-rgb:    196, 151, 58;   /* p/ radial tingido do fundo */

  /* ─── Semânticos ────────────────────────────────────────── */
  --success:      #4A7C59;  --success-soft: rgba(74, 124, 89, 0.16);
  --warning:      #B8860B;  --warning-soft: rgba(184, 134, 11, 0.16);
  --danger:       #8B3A3A;  --danger-soft:  rgba(139, 58, 58, 0.18);
  --info:         #5B7B8A;  --info-soft:    rgba(91, 123, 138, 0.16);

  /* ─── Fontes ────────────────────────────────────────────── */
  --font-display: var(--font-playfair), 'Playfair Display', 'Georgia', serif;
  --font-body:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono:    var(--font-jetbrains), 'Consolas', monospace;

  /* ─── Controles de atmosfera (editáveis no Design System) ── */
  /* Fundo: composição de até 3 camadas (sólido + radial + linear) */
  --bg-radial-intensity: 0.22;     /* 0 = sem brilho radial · 1 = brilho intenso */
  --bg-radial-pos:       55% 75% at 4% 50%;
  --bg-radial-spread:    72%;      /* até onde o brilho radial alcança */
  --bg-linear-intensity: 0;        /* 0 = sem ornamento linear · 1 = forte */
  --bg-linear-angle:     135deg;

  /* Bordas e cantos */
  --radius-multiplier:   1;        /* 0.5 = quase quadrado · 1 = padrão · 1.5 = arredondado */
  --shadow-intensity:    1;        /* 0 = sem sombra · 1 = padrão · 2 = forte */
}

/* ─── Tema claro (arkeCORE warm cream) ────────────────────── */
/* Suporta DUAS sintaxes: .light-mode (legado) e :root[data-theme="light"] (v2). */
.light-mode,
:root[data-theme="light"] {
  --bg:            #F5F2ED;
  --surface:       #FFFFFF;
  --surface2:      #FAFAF8;
  --surface-hi:    #F1EEE8;
  --border:        #E5E0D8;
  --border-strong: #D0C8BE;
  --text:          #1A1A1A;
  --text-muted:    #6B6560;
  --text-subtle:   #9A9590;
  --sidebar-bg:    #FFFFFF;
  --nav-bg:        rgba(255, 252, 247, 0.85);
  --shadow:        0 2px 12px rgba(26, 26, 26, 0.06);

  /* ─── DS v2: tokens semânticos pro tema claro ─────────── */
  --fg-1:          #26332E;
  --fg-2:          #6E7470;
  --fg-3:          #9aa09c;
  --fg-on-dark:    #FAF7EF;
  --fg-on-brand:   #FFFFFF;
  --fg-link:       #aa2d00;
  --bg-page:       #F5F2ED;
  --bg-page-warm:  #F4E8D0;
  --bg-surface:    #FFFFFF;
  --bg-soft:       #F2EEE3;
  --bg-brand:      #C4973A;
  --bg-dark:       #26332E;
  --border-soft:   #E8E1D0;
  --border-hair:   rgba(38, 51, 46, 0.10);
}

/* ─── Tema escuro (data-theme explícito — v2) ─────────────── */
:root[data-theme="dark"] {
  --bg:            #000000;
  --surface:       #141414;
  --surface2:      #1E1E1E;
  --surface-hi:    #2A2A2A;
  --border:        #2A2A2A;
  --border-strong: #3A3A3A;
  --text:          #F5F2ED;
  --text-muted:    #9A9590;
  --text-subtle:   #6B6560;

  --fg-1:          #F0EDE3;
  --fg-2:          #A5A39A;
  --fg-3:          #6F6C63;
  --fg-on-dark:    #F0EDE3;
  --fg-on-brand:   #1A1A1A;
  --fg-link:       #FF7A50;
  --bg-page:       #0F1310;
  --bg-page-warm:  #1A1814;
  --bg-surface:    #181C18;
  --bg-soft:       #22271F;
  --bg-brand:      #C4973A;
  --bg-dark:       #0A0C0A;
  --border-soft:   #2A2F26;
  --border-hair:   rgba(240, 237, 227, 0.08);
}

/* ─── DS v2: tokens "neutros" (não mudam com tema) ────────── */
:root {
  /* Cores brand fixas */
  --brand-primary:     #C4973A;
  --brand-primary-rgb: 196 151 58;
  --brand-secondary:   #aa2d00;
  --brand-secondary-rgb: 170 45 0;
  --brand-tertiary:    #4A7C59;

  /* Functional colors */
  --color-success:  #4A7C59;
  --color-warning:  #D79A2B;
  --color-error:    #B84A3A;
  --color-info:     #3F7E96;

  /* Tipografia */
  --font-sans:       'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-editorial:  'Fraunces', 'Playfair Display', Georgia, serif;
  /* font-mono já vem do arke-themes.css, font-display + font-body também */

  --text-display:  3.5rem;
  --text-h1:       2.5rem;
  --text-h2:       1.875rem;
  --text-h3:       1.375rem;
  --text-h4:       1.125rem;
  --text-body:     1.0625rem;
  --text-small:    0.875rem;
  --text-tiny:     0.75rem;

  /* Spacing 4px base */
  --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;

  /* Radii (não conflita com radius-card/radius-panel já existentes) */
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    20px;

  /* Shadows tintadas */
  --shadow-sm:    0 1px 2px rgba(38, 51, 46, 0.06);
  --shadow-md:    0 12px 32px rgba(38, 51, 46, 0.10);
  --shadow-lg:    0 20px 48px rgba(38, 51, 46, 0.14);
  --shadow-xl:    0 28px 64px rgba(38, 51, 46, 0.18);

  /* Iconset stroke-width (thin=1.25 / medium=1.5 / bold=2.25) */
  --icon-stroke-width: 1.5;
}