/* ================================================================
   OWAIB, Sistema de Design, v2.1
   Tokens CSS, variáveis de design para uso em qualquer projeto.

   Uso:
     @import url("tokens.css");

   Conteúdo:
     Escalas cromáticas
       Brand Scale    19 stops (50 a 950), anchor em 500 (Terracota) e 700 (Mogno)
       Neutral Scale  19 stops (50 a 950), anchor em 100 (Linho), 200 (Areia), 800 (Carvão)

     Aliases nomeados
       --terracota, --mogno, --branco, --linho, --areia, --carvao

     Tokens semânticos (amarrados à escala)
       Fundo      --bg-base, --bg-surface, --bg-elevated, --bg-hover, --bg-active, --bg-inverse
       Texto      --text-primary, --text-secondary, --text-muted, --text-brand, --text-brand-accent, --text-inverse
       Borda      --border-subtle, --border-default, --border-strong, --border-brand
       Marca      --brand-subtle, --brand-muted, --brand-primary, --brand-hover, --brand-active, --brand-accent
       Feedback   --feedback-success (+subtle), --feedback-warning, --feedback-error (+hover +subtle), --feedback-info

     Sistema
       Spacing    N×4px, 16 stops, com extensões editoriais 32/48/64
       Radius     7 tokens semânticos (micro, xs, sm, md, lg, xl, pill)
       Shadows    5 níveis + inset, dual-layer com cast carvão
       Motion     ease-out, ease-in-out, dur-fast/base/slow

     Tipografia (self-hosted)
       --font-display (Playfair Display), --font-serif (Lora)
       --font-sans (alias de --font-serif), --font-mono (JetBrains Mono)
       Escala fs-xs a fs-5xl, line-heights e letter-spacings

     Assets do manual
       --mesh-*, 8 gradientes PNG
       --textura-*, 10 texturas orgânicas PNG
================================================================ */

:root {

      /* ── Escala Brand (19 stops, passos de 50) ── */
      --brand-50:  #FBEEEA;
      --brand-100: #F4D5CC;
      --brand-150: #EEC0B4;
      --brand-200: #E7AB9B;
      --brand-250: #E09682;
      --brand-300: #D98269;
      --brand-350: #D2765D;
      --brand-400: #CB6A51;
      --brand-450: #C56149;
      --brand-500: #BF5841;  /* Terracota oficial */
      --brand-550: #B14E38;
      --brand-600: #A3432E;  /* Hover oficial */
      --brand-650: #8D3C2B;
      --brand-700: #773628;  /* Mogno */
      --brand-750: #682F24;
      --brand-800: #5A2820;
      --brand-850: #4C211A;
      --brand-900: #3D1A14;
      --brand-950: #1F0D0A;

      /* ── Escala Neutral (19 stops, passos de 50) ── */
      --neutral-50:  #FFFFFF;    /* Branco puro */
      --neutral-100: #FAF6F4;    /* Linho, background oficial */
      --neutral-150: #F6F2EF;
      --neutral-200: #F3EEEA;    /* Areia, superfície alternativa */
      --neutral-250: #EDE5DF;
      --neutral-300: #E7DCD4;
      --neutral-350: #D8CAC1;
      --neutral-400: #C9B9AE;
      --neutral-450: #B2A297;
      --neutral-500: #9B8B80;
      --neutral-550: #85766C;
      --neutral-600: #6F6057;
      --neutral-650: #5C5048;
      --neutral-700: #4A3F39;
      --neutral-750: #362E2B;
      --neutral-800: #221E1D;    /* Carvão, texto principal */
      --neutral-850: #1A1616;
      --neutral-900: #120F0E;
      --neutral-950: #090707;

      /* ── Aliases nomeados ── */
      --terracota: var(--brand-500);
      --mogno:     var(--brand-700);
      --branco:    var(--neutral-50);
      --linho:     var(--neutral-100);
      --areia:     var(--neutral-200);
      --carvao:    var(--neutral-800);

      /* ── Tokens de fundo ── */
      --bg-base:     var(--linho);         /* neutral-100 */
      --bg-surface:  var(--areia);         /* neutral-200 */
      --bg-elevated: var(--branco);        /* neutral-50 */
      --bg-hover:    var(--neutral-300);   /* #E7DCD4 */
      --bg-active:   var(--neutral-350);   /* #D8CAC1 */
      --bg-inverse:  var(--carvao);        /* neutral-800 */

      /* ── Tokens de texto ── */
      --text-primary:      var(--carvao);         /* neutral-800 */
      --text-secondary:    var(--neutral-700);    /* #4A3F39 */
      --text-muted:        var(--neutral-550);    /* #85766C */
      --text-brand:        var(--terracota);      /* brand-500 */
      --text-brand-accent: var(--mogno);          /* brand-700 */
      --text-inverse:      var(--branco);         /* neutral-50 */

      /* ── Tokens de borda ── */
      --border-subtle:  var(--areia);          /* neutral-200 */
      --border-default: var(--neutral-300);    /* #E7DCD4 */
      --border-strong:  var(--neutral-350);    /* #D8CAC1 */
      --border-brand:   var(--terracota);      /* brand-500 */

      /* ── Tokens de marca ── */
      --brand-subtle:  var(--brand-50);   /* #FBEEEA */
      --brand-muted:   var(--brand-200);  /* #E7AB9B */
      --brand-primary: var(--terracota);
      --brand-hover:   var(--brand-600);
      --brand-active:  var(--brand-700);
      --brand-accent:  var(--mogno);

      /* ── Feedback ── */
      --feedback-success:         #2D7A4F;
      --feedback-success-subtle:  #F0F7F2;
      --feedback-warning:         #A86B00;
      --feedback-error:           #C0392B;
      --feedback-error-hover:     #A82F22;
      --feedback-error-subtle:    #FDF1F0;
      --feedback-info:            #2C6490;

      /* ── Spacing (N×4px com extensões editoriais) ── */
      --space-1:  4px;
      --space-2:  8px;
      --space-3:  12px;
      --space-4:  16px;
      --space-5:  20px;
      --space-6:  24px;
      --space-7:  28px;
      --space-8:  32px;
      --space-10: 40px;
      --space-12: 48px;
      --space-16: 64px;
      --space-20: 80px;
      --space-24: 96px;
      --space-32: 128px;
      --space-48: 192px;
      --space-64: 256px;

      /* ── Radius (nomes semânticos) ── */
      --radius-micro: 2px;
      --radius-xs:    4px;
      --radius-sm:    6px;
      --radius-md:    8px;    /* base */
      --radius-lg:    12px;
      --radius-xl:    20px;
      --radius-pill:  9999px;

      /* ── Shadows (dual-layer, cast carvão) ── */
      --shadow-xs: 0 1px 2px  rgba(34,30,29,.04), 0 1px 4px  rgba(34,30,29,.03);
      --shadow-sm: 0 1px 3px  rgba(34,30,29,.06), 0 2px 8px  rgba(34,30,29,.05);
      --shadow-md: 0 2px 6px  rgba(34,30,29,.08), 0 4px 16px rgba(34,30,29,.07);
      --shadow-lg: 0 4px 12px rgba(34,30,29,.10), 0 8px 28px rgba(34,30,29,.09);
      --shadow-xl: 0 8px 24px rgba(34,30,29,.14), 0 16px 48px rgba(34,30,29,.12);
      --shadow-inset: inset 0 1px 0 rgba(250, 246, 244, 0.6);

      /* ── Motion ── */
      --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
      --dur-fast:    140ms;
      --dur-base:    220ms;
      --dur-slow:    420ms;

      /* ── Tipografia ── */
      --font-display: 'Playfair Display', 'Didot', 'Times New Roman', serif;
      --font-serif:   'Lora', Georgia, 'Times New Roman', serif;
      --font-sans:    var(--font-serif);  /* alias, sistema OWAIB é serif-dominant */
      --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

      /* Escala tipográfica */
      --fs-xs:   0.75rem;
      --fs-sm:   0.875rem;
      --fs-base: 1rem;
      --fs-md:   1.125rem;
      --fs-lg:   1.375rem;
      --fs-xl:   1.75rem;
      --fs-2xl:  2.25rem;
      --fs-3xl:  3rem;
      --fs-4xl:  4.25rem;
      --fs-5xl:  6rem;

      --lh-tight:   1.08;
      --lh-snug:    1.25;
      --lh-normal:  1.5;
      --lh-relaxed: 1.7;

      --ls-tight:  -0.02em;
      --ls-normal:  0;
      --ls-wide:    0.08em;
      --ls-wider:   0.18em;

      /* ── Layout ── */
      --sidebar-w: 200px;

      /* ── Mesh Gradients, PNG 1920×1080 ── */
      --mesh-claro:      url('assets/mesh/mesh-claro.png');
      --mesh-quente:     url('assets/mesh/mesh-quente.png');
      --mesh-escuro:     url('assets/mesh/mesh-escuro.png');
      --mesh-neutro:     url('assets/mesh/mesh-neutro.png');
      --mesh-crepusculo: url('assets/mesh/mesh-crepusculo.png');
      --mesh-veludo:     url('assets/mesh/mesh-veludo.png');
      --mesh-ambar:      url('assets/mesh/mesh-ambar.png');
      --mesh-noite:      url('assets/mesh/mesh-noite.png');

      /* ── Texturas orgânicas, PNG 800×800 tile ── */
      --textura-grain:      url('assets/texturas/textura-grain.png');
      --textura-dots:       url('assets/texturas/textura-dots.png');
      --textura-lines:      url('assets/texturas/textura-lines.png');
      --textura-diagonal:   url('assets/texturas/textura-diagonal.png');
      --textura-grid:       url('assets/texturas/textura-grid.png');
      --textura-papel:      url('assets/texturas/textura-papel.png');
      --textura-linho:      url('assets/texturas/textura-linho.png');
      --textura-canvas:     url('assets/texturas/textura-canvas.png');
      --textura-pergaminho: url('assets/texturas/textura-pergaminho.png');
      --textura-stipple:    url('assets/texturas/textura-stipple.png');
    }

/* ================================================================
   TEMA DARK
   Sobrescreve apenas os tokens semânticos. Escalas brutas, fontes,
   spacing, radius, motion e assets ficam idênticos ao light.
   Ativar via <html data-theme="dark"> ou <body data-theme="dark">.
================================================================ */
[data-theme="dark"] {

      /* ── Tokens de fundo (dark) ── */
      --bg-base:     var(--neutral-900);   /* #120F0E */
      --bg-surface:  var(--neutral-850);   /* #1A1616 */
      --bg-elevated: var(--neutral-800);   /* #221E1D, carvão */
      --bg-hover:    var(--neutral-750);   /* #362E2B */
      --bg-active:   var(--neutral-700);   /* #4A3F39 */
      --bg-inverse:  var(--linho);         /* invertido vira claro */

      /* ── Tokens de texto (dark) ── */
      --text-primary:      var(--linho);          /* neutral-100 */
      --text-secondary:    var(--neutral-300);    /* #E7DCD4 */
      --text-muted:        var(--neutral-450);    /* #B2A297 */
      --text-brand:        var(--brand-500);      /* #BF5841, terracota */
      --text-brand-accent: var(--brand-300);      /* #D98269 */
      --text-inverse:      var(--carvao);         /* invertido vira escuro */

      /* ── Tokens de borda (dark) ── */
      --border-subtle:  var(--neutral-800);    /* #221E1D */
      --border-default: var(--neutral-750);    /* #362E2B */
      --border-strong:  var(--neutral-700);    /* #4A3F39 */
      --border-brand:   var(--brand-500);

      /* ── Tokens de marca (dark) ──
         No dark, "subtle" e "muted" ficam escuros (chips em fundo escuro)
         e "hover/active" clareiam ao invés de escurecer */
      --brand-subtle:  var(--brand-850);   /* #4C211A, chip escuro */
      --brand-muted:   var(--brand-600);   /* #A3432E */
      --brand-primary: var(--brand-500);   /* #BF5841, terracota */
      --brand-hover:   var(--brand-400);   /* clareia */
      --brand-active:  var(--brand-300);   /* clareia mais */
      --brand-accent:  var(--brand-300);   /* destaque mais luminoso no dark */

      /* ── Feedback (dark)
         Cores base mantidas, subtles trocados para tons escuros */
      --feedback-success:         #4FB07A;
      --feedback-success-subtle:  #16261C;
      --feedback-warning:         #E0A040;
      --feedback-error:           #E06354;
      --feedback-error-hover:     #C04A3D;
      --feedback-error-subtle:    #2B1715;
      --feedback-info:            #5BA0D0;

      /* ── Shadows (dark)
         Cast preto puro com mais opacidade. Inset com brilho discreto */
      --shadow-xs: 0 1px 2px  rgba(0,0,0,.40), 0 1px 4px  rgba(0,0,0,.30);
      --shadow-sm: 0 1px 3px  rgba(0,0,0,.45), 0 2px 8px  rgba(0,0,0,.35);
      --shadow-md: 0 2px 6px  rgba(0,0,0,.50), 0 4px 16px rgba(0,0,0,.40);
      --shadow-lg: 0 4px 12px rgba(0,0,0,.55), 0 8px 28px rgba(0,0,0,.45);
      --shadow-xl: 0 8px 24px rgba(0,0,0,.60), 0 16px 48px rgba(0,0,0,.50);
      --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }