/**
 * tokens.css — Design System BAZILAR v2.5 "Quiet Luxury Tupiniquim"
 * Adaptado para Ressonadores · light + dark mode · WCAG AA verificado
 * Fonte de verdade: tokens.css v2.5 fornecido pelo design.
 */

/* ═══════════════════════════════════════════════════════════════════════
   1. PALETA BASE — Light Mode
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Superfícies */
  --color-bg:       #F6F3ED;
  --color-surface:  #FDFCF9;
  --color-subtle:   #EDE9E0;

  /* Texto */
  --color-text:           #1E1B15;
  --color-text-secondary: #4C4538;
  --color-text-muted:     #7C7264;
  --color-text-dim:       #ACA090;

  /* Ouro matte */
  --color-gold:        #967438;
  --color-gold-light:  #B8924C;
  --color-gold-bg:     rgba(150,116,56,0.08);
  --color-gold-border: rgba(150,116,56,0.20);

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(30,27,21,.07);
  --shadow-md:  0 4px 18px rgba(30,27,21,.09);

  /* Feedback */
  --color-feedback-success: #2E7D52;
  --color-feedback-error:   #8C3030;
  --color-warning:          #C45A20;
}


/* ═══════════════════════════════════════════════════════════════════════
   2. DARK MODE
   ═══════════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"],
[data-theme="dark"] {
  --color-bg:       #0F0E0A;
  --color-surface:  #1A1914;
  --color-subtle:   #222018;

  --color-text:           #F2EEE4;
  --color-text-secondary: #C4BAA6;
  --color-text-muted:     #867C6A;
  --color-text-dim:       #524C40;

  --color-gold:        #C09A4A;
  --color-gold-light:  #D4B060;
  --color-gold-bg:     rgba(192,154,74,0.09);
  --color-gold-border: rgba(192,154,74,0.22);

  --shadow-sm:  0 1px 4px rgba(0,0,0,.35);
  --shadow-md:  0 4px 22px rgba(0,0,0,.45);

  --color-feedback-error:   #D46060;
  --color-feedback-success: #4CAF7A;
}


/* ═══════════════════════════════════════════════════════════════════════
   3. WU XING — Lápis-lazúli · Esmeralda · Cinábrio · Âmbar · Prata fria
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --element-water-dark:  #1A1A1A; --element-water-base:  #1A1A1A; --element-water-light:  #D0D0D0;
  --element-wood-dark:   #0B5233; --element-wood-base:   #147A48; --element-wood-light:   #A8DBBF;
  --element-fire-dark:   #8C0A12; --element-fire-base:   #D3232E; --element-fire-light:   #F5BBBF;
  --element-earth-dark:  #7A4C08; --element-earth-base:  #B87C14; --element-earth-light:  #F0E0A0;
  --element-metal-dark:  #383838; --element-metal-base:  #848484; --element-metal-light:  #E0E0E0;

  /* Regra DS: badge = base saturado + texto branco 66%, sem border */
  --element-badge-text: rgba(255,255,255,0.66);
}

[data-theme="dark"] {
  --element-water-dark:  #A0A0A0; --element-water-base:  #848484; --element-water-light:  #222222;
  --element-wood-dark:   #50C880; --element-wood-base:   #0E6038; --element-wood-light:   #061A10;
  --element-fire-dark:   #F05060; --element-fire-base:   #A81820; --element-fire-light:   #300810;
  --element-earth-dark:  #E8B020; --element-earth-base:  #A07808; --element-earth-light:  #1E1400;
  --element-metal-dark:  #F0F0F0; --element-metal-base:  #E0E0E0; --element-metal-light:  #2A2A2A;
}


/* ═══════════════════════════════════════════════════════════════════════
   4. TIPOGRAFIA — famílias canônicas DS v2.5
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ff:  'Lora', 'Noto Serif SC', serif;          /* display */
  --fd2: 'Noto Sans', system-ui, sans-serif;       /* body */
  --fm2: 'JetBrains Mono', monospace;              /* dados runtime / labels uppercase */
  --fc:  'Noto Serif SC', serif;                   /* CJK — nunca em itálico */

  /* aliases longos */
  --font-heading: var(--ff);
  --font-body:    var(--fd2);
  --font-mono:    var(--fm2);
  --font-chinese: var(--fc);
}


/* ═══════════════════════════════════════════════════════════════════════
   5. ESCALA TIPOGRÁFICA — razão 1.333 · base 12px
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --text-ctx:    0.563rem;   /*  9.0px */
  --text-label:  0.750rem;   /* 12.0px */
  --text-pinyin: 0.75rem;  /* 11.0px — Noto Sans, sem itálico */
  --text-base:   1.000rem;   /* 16.0px */
  --text-dest:   1.333rem;   /* 21.3px */
  --text-cjk:    1.776rem;   /* 28.4px */
  --text-glyph:  3.157rem;   /* 50.5px */

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.18em;
  --tracking-ultra:   0.20em;
}


/* ═══════════════════════════════════════════════════════════════════════
   6. ESPAÇAMENTO — base 8px
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --space-1:   8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-10: 80px;

  --content-max:   720px;
  --container-sm:  480px;
  --container-md:  720px;
}


/* ═══════════════════════════════════════════════════════════════════════
   7. BORDAS · SUPERFÍCIES VIDRO
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  --border-thin:   1px;
  --border-medium: 2px;

  --surface-glass:      rgba(246,243,237,0.82);
  --surface-glass-dark: rgba(15,14,10,0.88);
}

[data-theme="dark"] {
  --surface-glass: var(--surface-glass-dark);
}


/* ═══════════════════════════════════════════════════════════════════════
   8. MOTION
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ease:           cubic-bezier(.25,.1,.25,1);
  --ease-out:       cubic-bezier(.4,0,.2,1);
  --duration-fast:    200ms;
  --duration-normal:  350ms;
  --duration-slow:    500ms;
  --enter-y: 14px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --enter-y: 0px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   9. SOMBRAS · FOCUS
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --shadow-gold:  0 4px 18px rgba(150,116,56,.20);
  --focus-ring:   0 0 0 3px rgba(150,116,56,.20);
}

[data-theme="dark"] {
  --shadow-gold: 0 4px 18px rgba(192,154,74,.22);
  --focus-ring:  0 0 0 3px rgba(192,154,74,.22);
}


/* ═══════════════════════════════════════════════════════════════════════
   10. SEMÂNTICA POR ELEMENTO — custom props contextuais
       Uso: var(--elem-text), var(--elem-badge-bg), etc.
       Definidas na classe .elem-* → sem regras dark por contexto.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── MADEIRA ── */
.elem-madeira {
  --elem-text:             #147A48;
  --elem-text-yin:         #1A9A5A;
  --elem-border:           #147A48;
  --elem-badge-yang-bg:    #147A48;
  --elem-badge-yang-text:  rgba(255,255,255,0.82);
  --elem-badge-yin-bg:     #A8DBBF;
  --elem-badge-yin-text:   #0B5233;
}
[data-theme="dark"] .elem-madeira {
  --elem-text:             #50C880;
  --elem-text-yin:         #38A060;
  --elem-border:           #0E6038;
  --elem-badge-yang-bg:    #0E6038;
  --elem-badge-yang-text:  rgba(255,255,255,0.82);
  --elem-badge-yin-bg:     #061A10;
  --elem-badge-yin-text:   #50C880;
}

/* ── FOGO ── */
.elem-fogo {
  --elem-text:             #D3232E;
  --elem-text-yin:         #E04050;
  --elem-border:           #D3232E;
  --elem-badge-yang-bg:    #D3232E;
  --elem-badge-yang-text:  rgba(255,255,255,0.82);
  --elem-badge-yin-bg:     #F5BBBF;
  --elem-badge-yin-text:   #8C0A12;
}
[data-theme="dark"] .elem-fogo {
  --elem-text:             #F05060;
  --elem-text-yin:         #D03848;
  --elem-border:           #A81820;
  --elem-badge-yang-bg:    #A81820;
  --elem-badge-yang-text:  rgba(255,255,255,0.82);
  --elem-badge-yin-bg:     #300810;
  --elem-badge-yin-text:   #F05060;
}

/* ── TERRA ── */
.elem-terra {
  --elem-text:             #B87C14;
  --elem-text-yin:         #C89020;
  --elem-border:           #B87C14;
  --elem-badge-yang-bg:    #B87C14;
  --elem-badge-yang-text:  rgba(255,255,255,0.82);
  --elem-badge-yin-bg:     #F0E0A0;
  --elem-badge-yin-text:   #7A4C08;
}
[data-theme="dark"] .elem-terra {
  --elem-text:             #E8B020;
  --elem-text-yin:         #C09010;
  --elem-border:           #A07808;
  --elem-badge-yang-bg:    #A07808;
  --elem-badge-yang-text:  rgba(255,255,255,0.82);
  --elem-badge-yin-bg:     #1E1400;
  --elem-badge-yin-text:   #E8B020;
}

/* ── METAL ── */
.elem-metal {
  --elem-text:             #606060;
  --elem-text-yin:         #787878;
  --elem-border:           #848484;
  --elem-badge-yang-bg:    #848484;
  --elem-badge-yang-text:  rgba(255,255,255,0.82);
  --elem-badge-yin-bg:     #E0E0E0;
  --elem-badge-yin-text:   #383838;
}
[data-theme="dark"] .elem-metal {
  --elem-text:             #F0F0F0;
  --elem-text-yin:         #C8C8C8;
  --elem-border:           #C0C0C0;
  --elem-badge-yang-bg:    #E0E0E0;
  --elem-badge-yang-text:  rgba(0,0,0,0.75);
  --elem-badge-yin-bg:     #2A2A2A;
  --elem-badge-yin-text:   #E0E0E0;
}

/* ── ÁGUA ── */
.elem-agua {
  --elem-text:             #1A1A1A;
  --elem-text-yin:         #383838;
  --elem-border:           #1A1A1A;
  --elem-badge-yang-bg:    #1A1A1A;
  --elem-badge-yang-text:  rgba(255,255,255,0.82);
  --elem-badge-yin-bg:     #D0D0D0;
  --elem-badge-yin-text:   #1A1A1A;
}
[data-theme="dark"] .elem-agua {
  --elem-text:             #A0A0A0;
  --elem-text-yin:         #787878;
  --elem-border:           #848484;
  --elem-badge-yang-bg:    #848484;
  --elem-badge-yang-text:  rgba(255,255,255,0.82);
  --elem-badge-yin-bg:     #222222;
  --elem-badge-yin-text:   #A0A0A0;
}

/* ── CURIOSO ── */
.elem-curioso {
  --elem-text:             var(--color-gold);
  --elem-text-yin:         var(--color-gold-light);
  --elem-border:           var(--color-gold);
  --elem-badge-yang-bg:    var(--color-gold);
  --elem-badge-yang-text:  rgba(255,255,255,0.82);
  --elem-badge-yin-bg:     var(--color-gold-bg);
  --elem-badge-yin-text:   var(--color-gold);
}