/* ═══════════════════════════════════════════════════════════
   MSCREATIVE.SYSTEMS™ — UNIFIED DESIGN TOKENS V3.0
   Single source of truth for all visual properties.
   ═══════════════════════════════════════════════════════════ */

@import url('./story-tokens.css');

:root {

  /* === GLOBAL STRUCTURAL ===
     Grid, borders, spacing, layout
     ────────────────────────────────────────────────────────── */
  --ds-grid-color:          rgba(255, 255, 255, 0.025);
  --ds-grid-size:           54px;
  --ds-border-subtle:       rgba(255, 255, 255, 0.06);
  --ds-sidebar-width:       280px;
  --ds-radius-sm:           2px;
  --ds-radius-md:           4px;

  /* === PRODUCT STACK — TYPOGRAPHY (Typo A) ===
     Post-Digital Hybrid · Fraunces + Inter Tight + IBM Plex Mono
     Migrated 2026-04-20 · DEC-004
     ────────────────────────────────────────────────────────── */
  --ds-font-display:        'Fraunces', Georgia, serif;
  --ds-font-body:           'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --ds-font-label:          'IBM Plex Mono', 'Courier New', monospace;

  /* Fraunces variable-font optical sizes.
     opsz 144 = display dramático; opsz 24 = editorial quieto;
     opsz 12 = body. Sem font-variation-settings, Fraunces cai
     no default (opsz padrão) e perde warmth. */
  --ds-fraunces-opsz-display:   144;
  --ds-fraunces-opsz-editorial:  24;
  --ds-fraunces-opsz-body:       12;

  /* Legacy stack (Typo A pre-migration) — DEPRECATED (DEC-017).
     Preservado como comentário para referência de migração.
     Remover em PR de limpeza pós-rollout. */
  /* --ds-font-display-legacy: 'Anton', sans-serif; */
  /* --ds-font-body-legacy:    'DM Sans', sans-serif; */
  /* --ds-font-label-legacy:   'Space Mono', monospace; */

  /* === EDITORIAL STACK — TYPOGRAPHY (Typo B) ===
     IBM Plex Sans + Libre Caslon Text + Space Mono
     All clamp sizes from MD spec §8
     ────────────────────────────────────────────────────────── */

  /* Families */
  --ds-ed-font-headline:    'IBM Plex Sans', sans-serif;
  --ds-ed-font-emphasis:    'Libre Caslon Text', serif;
  --ds-ed-font-body:        'IBM Plex Sans', sans-serif;
  --ds-ed-font-label:       'Space Mono', monospace;

  /* Weights */
  --ds-ed-w-light:          300;
  --ds-ed-w-regular:        400;
  --ds-ed-w-medium:         500;
  --ds-ed-w-display:        700;   /* apenas drop cap */

  /* Sizes (fluid clamps) */
  --ds-ed-h1-size:          clamp(36px, 4.5vw, 54px);
  --ds-ed-emphasis-size:    clamp(42px, 5.2vw, 62px);
  --ds-ed-h2-size:          clamp(28px, 3.2vw, 38px);
  --ds-ed-subtitle-size:    clamp(16px, 1.8vw, 19px);
  --ds-ed-body-size:        clamp(15px, 1.6vw, 17px);
  --ds-ed-quote-size:       clamp(22px, 2.6vw, 28px);
  --ds-ed-label-size:       clamp(9px, 0.85vw, 11px);
  --ds-ed-meta-size:        clamp(8px, 0.75vw, 10px);
  --ds-ed-initials-size:    clamp(24px, 2.5vw, 28px);
  --ds-ed-dropcap-size:     clamp(80px, 9vw, 120px);

  /* Line heights */
  --ds-ed-lh-tight:         1.12;
  --ds-ed-lh-snug:          1.2;
  --ds-ed-lh-normal:        1.5;
  --ds-ed-lh-body:          1.65;

  /* Tracking */
  --ds-ed-track-headline:   -0.02em;
  --ds-ed-track-label:       0.18em;
  --ds-ed-track-kicker:      0.25em;
  --ds-ed-track-vertical:    0.3em;

  /* === ACCENT STACK — TYPO C ===
     Cormorant Garamond — high-fashion serif
     ────────────────────────────────────────────────────────── */
  --ds-tc-font:             'Cormorant Garamond', serif;
  --ds-tc-w-light:          300;
  --ds-tc-w-regular:        400;
  --ds-tc-w-semibold:       600;
  --ds-tc-w-bold:           700;
  --ds-tc-headline-size:    18px;
  --ds-tc-headline-lh:      1.08;
  --ds-tc-headline-tracking: -0.01em;
  --ds-tc-dropcap-size:     36px;
  --ds-tc-dropcap-lh:       0.8;
  --ds-tc-body-italic-size: 7px;
  --ds-tc-body-italic-lh:   1.4;
  --ds-tc-rule-opacity:     0.12;

  /* === BASE PALETTE ===
     Core backgrounds, text, and surface colors
     ────────────────────────────────────────────────────────── */
  --ds-bg-primary:          #0A0C10;
  --ds-bg-secondary:        #12141A;
  --ds-bg-surface:          #1A1D26;
  --ds-bg-surface-hover:    #22262F;
  --ds-text-primary:        #B2A898;
  --ds-text-body:           #B2A898;
  --ds-text-secondary:      rgba(178, 168, 152, 0.65);
  --ds-text-muted:          rgba(178, 168, 152, 0.38);

  /* === MS IDENTITY · MIDNIGHT (DEC-001 · 2026-04-20) ===
     Paleta institucional MSCREATIVE.SYSTEMS — migrada de Gold.
     Narrativa: "Meia-noite: permanência sem performance.
                 Só quem observa de perto percebe."
     Contraste AAA (7.2:1) sobre BG médio.
     ────────────────────────────────────────────────────────── */
  --ds-ms-accent-1:         #A89D80;   /* cream warm low-saturation (main identity) */
  --ds-ms-accent-2:         #756750;   /* warm gray escuro (secondary/hover) */
  --ds-ms-bg-start:         #0C0B08;
  --ds-ms-bg-end:            #16140F;
  --ds-ms-bg-gradient:      linear-gradient(145deg, #0C0B08 0%, #16140F 100%);
  --ds-ms-text-muted:       rgba(168, 157, 128, 0.65);

  /* === CEREMONIAL GOLD (reservado · uso futuro Emblem/selos) ===
     Gold não morre — vira estado cerimonial reservado pra
     Emblem shoes do M4, selos, assinaturas oficiais.
     ────────────────────────────────────────────────────────── */
  --ds-accent-ceremonial-gold:      #E8C547;
  --ds-accent-ceremonial-gold-dark: #B8941F;

  /* === PRODUCT ACCENT PALETTE (Chumbo Quente — LEGACY) ===
     Gold antigo MSCS — DEPRECATED (DEC-017).
     Migrado para --ds-ms-accent-1 / --p-ms-accent1.
     Preservado como comentário para referência de migração.
     Remover em PR de limpeza pós-rollout.
     ────────────────────────────────────────────────────────── */
  /* --ds-accent-gold:         #D4AF37; */
  /* --ds-accent-gold-dark:    #8B6914; */

  /* === EDITORIAL PALETTE (Chumbo Puro + Electric Orange) ===
     All --ds-ed-* color tokens
     ────────────────────────────────────────────────────────── */

  /* Backgrounds */
  --ds-ed-bg:               linear-gradient(145deg, #0A0A0E 0%, #111114 100%);

  /* Text */
  --ds-ed-text-headline:    #6A6A6A;
  --ds-ed-text-emphasis:    #A85A30;
  --ds-ed-text-body:        rgba(130, 130, 130, 0.4);
  --ds-ed-text-label:       rgba(130, 130, 130, 0.18);
  --ds-ed-text-label-accent: rgba(168, 90, 48, 0.2);

  /* Accents */
  --ds-ed-accent-primary:   #A85A30;
  --ds-ed-accent-secondary: #6A3818;
  --ds-ed-accent-rule:      linear-gradient(90deg, #A85A30 0%, #6A3818 50%, transparent 100%);

  /* Ghosts / structure / glitch */
  --ds-ed-grid-line:        rgba(255, 255, 255, 0.025);
  --ds-ed-ghost-1:          rgba(168, 90, 48, 0.06);
  --ds-ed-ghost-2:          rgba(168, 90, 48, 0.04);
  --ds-ed-ghost-3:          rgba(168, 90, 48, 0.025);
  --ds-ed-glitch:           rgba(168, 90, 48, 0.07);
  --ds-ed-ascii:            rgba(168, 90, 48, 0.035);

  /* === SEMANTIC ===
     Status colors
     ────────────────────────────────────────────────────────── */
  --ds-success:             #2ECC71;
  --ds-error:               #E74C3C;
  --ds-warning:             #F39C12;
  --ds-info:                #3498DB;


  /* ═══════════════════════════════════════════════════════════
     CANONICAL TOKENS — DEC-001 a DEC-018 (2026-04-20)
     Fonte da verdade: KNOWLEDGE/DECISIONS_DESIGN_SYSTEM.md
     ═══════════════════════════════════════════════════════════ */

  /* ──────────────────────────────────────────────
     TIPOGRAFIA GLOBAL — helpers (DEC-004/012)
     Fraunces display/subheading invariantes em todos os 7 produtos.
  ────────────────────────────────────────────── */

  /* Display (opsz 144 = dramático máximo) */
  --ds-display-opsz:        144;
  --ds-display-weight:      900;
  --ds-display-lh:          1.0;
  --ds-display-tracking:    -0.03em;

  /* Subheading display */
  --ds-subheading-opsz:     72;
  --ds-subheading-weight:   700;
  --ds-subheading-lh:       1.1;

  /* Editorial quieto (Fraunces recuando) */
  --ds-editorial-opsz:      24;
  --ds-editorial-weight:    500;


  /* ──────────────────────────────────────────────
     MS · MSCREATIVE.SYSTEMS  [DEC-001/004]
  ────────────────────────────────────────────── */
  --p-ms-accent1:       #A89D80;
  --p-ms-accent2:       #756750;
  --p-ms-bg-start:      #0C0B08;
  --p-ms-bg-end:        #16140F;
  --p-ms-gradient:      linear-gradient(160deg, #0C0B08 0%, #16140F 100%);
  --p-ms-body-weight:   400;
  --p-ms-body-style:    normal;
  --p-ms-body-lh:       1.6;
  --p-ms-mono-weight:   400;


  /* ──────────────────────────────────────────────
     FRONTEIRISTAS  [DEC-005]
  ────────────────────────────────────────────── */
  --p-fronteiristas-accent1:     #B5BF9A;
  --p-fronteiristas-accent2:     #7A8562;
  --p-fronteiristas-bg-start:    #141210;
  --p-fronteiristas-bg-end:      #1E1C18;
  --p-fronteiristas-gradient:    linear-gradient(160deg, #141210 0%, #1E1C18 100%);
  --p-fronteiristas-body-weight: 400;
  --p-fronteiristas-body-style:  normal;
  --p-fronteiristas-body-lh:     1.7;
  --p-fronteiristas-mono-weight: 400;


  /* ──────────────────────────────────────────────
     CREATIVE ORACLE  [DEC-006]
  ────────────────────────────────────────────── */
  --p-oracle-accent-start:  #E8397A;
  --p-oracle-accent-end:    #E87800;
  --p-oracle-gradient:      linear-gradient(135deg, #E8397A 0%, #E87800 100%);
  --p-oracle-bg-start:      #0F1008;
  --p-oracle-bg-end:        #1E1A08;
  --p-oracle-bg-gradient:   linear-gradient(160deg, #0F1008 0%, #1E1A08 100%);
  --p-oracle-body-weight:   400;
  --p-oracle-body-style:    italic;
  --p-oracle-body-lh:       1.5;
  --p-oracle-mono-weight:   400;


  /* ──────────────────────────────────────────────
     NEURO CODEX  [DEC-010]
  ────────────────────────────────────────────── */
  --p-neuro-accent1:     #00C9C8;
  --p-neuro-accent2:     #007A7A;
  --p-neuro-bg-start:    #060214;
  --p-neuro-bg-end:      #0D0828;
  --p-neuro-gradient:    linear-gradient(160deg, #060214 0%, #0D0828 100%);
  --p-neuro-body-weight: 400;
  --p-neuro-body-style:  normal;
  --p-neuro-body-lh:     1.5;
  --p-neuro-mono-weight: 600;


  /* ──────────────────────────────────────────────
     STYLE CODEX  [DEC-007]
  ────────────────────────────────────────────── */
  --p-style-accent1:     #E8397A;
  --p-style-accent2:     #F55A2A;
  --p-style-bg-start:    #180A12;
  --p-style-bg-end:      #261018;
  --p-style-gradient:    linear-gradient(160deg, #180A12 0%, #261018 100%);
  --p-style-body-weight: 600;
  --p-style-body-style:  italic;
  --p-style-body-lh:     1.4;
  --p-style-mono-weight: 400;


  /* ──────────────────────────────────────────────
     DESIGN CODEX  [DEC-008]
  ────────────────────────────────────────────── */
  --p-design-accent1:     #909098;
  --p-design-accent2:     #525258;
  --p-design-bg-start:    #080808;
  --p-design-bg-end:      #101014;
  --p-design-gradient:    linear-gradient(160deg, #080808 0%, #101014 100%);
  --p-design-body-weight: 500;
  --p-design-body-style:  normal;
  --p-design-body-lh:     1.55;
  --p-design-mono-weight: 400;


  /* ──────────────────────────────────────────────
     EXECUTION CODEX  [DEC-009]
  ────────────────────────────────────────────── */
  --p-execution-accent1:     #E87800;
  --p-execution-accent2:     #BF4800;
  --p-execution-bg-start:    #0E0A06;
  --p-execution-bg-end:      #1A1006;
  --p-execution-gradient:    linear-gradient(160deg, #0E0A06 0%, #1A1006 100%);
  --p-execution-body-weight: 500;
  --p-execution-body-style:  normal;
  --p-execution-body-lh:     1.5;
  --p-execution-mono-weight: 700;


  /* ──────────────────────────────────────────────
     EMBLEM CERIMONIAL  [DEC-013]
  ────────────────────────────────────────────── */
  --emblem-gold:       #E8C547;
  --emblem-shadow:     #B8941F;
  --emblem-gradient:   linear-gradient(135deg, #E8C547 0%, #B8941F 100%);


  /* ──────────────────────────────────────────────
     M4 MASCOT  [DEC-015]
  ────────────────────────────────────────────── */
  --m4-orange:         #FF3B00;
  --m4-dark-orange:    #CC2E00;

  --m4-nocturne-body:   #D97A5E;
  --m4-nocturne-patas:  #A85F46;
  --m4-nocturne-eyes:   #0B1220;
  --m4-nocturne-clouds: #A8AFBF;
  --m4-nocturne-stars:  #E7EAF0;
  --m4-nocturne-scene:  #0B1220;

  --m4-shoe-ms-1:             #A89D80;
  --m4-shoe-ms-2:             #756750;
  --m4-shoe-fronteiristas-1:  #B5BF9A;
  --m4-shoe-fronteiristas-2:  #7A8562;
  --m4-shoe-oracle-1:         #E8397A;
  --m4-shoe-oracle-2:         #E87800;
  --m4-shoe-neuro-1:          #00C9C8;
  --m4-shoe-neuro-2:          #007A7A;
  --m4-shoe-style-1:          #E8397A;
  --m4-shoe-style-2:          #F55A2A;
  --m4-shoe-design-1:         #909098;
  --m4-shoe-design-2:         #525258;
  --m4-shoe-execution-1:      #E87800;
  --m4-shoe-execution-2:      #BF4800;
  --m4-shoe-emblem-1:         #E8C547;
  --m4-shoe-emblem-2:         #B8941F;
  --m4-shoe-neutral-1:        #404040;
  --m4-shoe-neutral-2:        #282828;


  /* ──────────────────────────────────────────────
     GOVERNANÇA  [DEC-011/013]
  ────────────────────────────────────────────── */
  --gov-separator:          rgba(168, 157, 128, 0.25);
  --gov-separator-strong:   rgba(168, 157, 128, 0.50);
  --gov-ms-logo:            #A89D80;
  --gov-ms-attribution:     #756750;
  --gov-ms-attribution-bg:  transparent;


  /* ──────────────────────────────────────────────
     SUBPRODUTOS — HERANÇA  [DEC-014]
  ────────────────────────────────────────────── */
  --p-kb-indicator:         linear-gradient(135deg, #E8397A 0%, #E87800 100%);

  --p-skill-style-accent:          #E8397A;
  --p-skill-style-accent2:         #F55A2A;
  --p-skill-neuro-accent:          #00C9C8;
  --p-skill-neuro-accent2:         #007A7A;
  --p-skill-fronteiristas-accent:  #B5BF9A;
  --p-skill-fronteiristas-accent2: #7A8562;
  --p-skill-design-accent:         #909098;
  --p-skill-design-accent2:        #525258;
  --p-skill-execution-accent:      #E87800;
  --p-skill-execution-accent2:     #BF4800;

  --p-skill-transversal-accent:    #A89D80;
  --p-skill-transversal-accent2:   #756750;
}


/* ═══════════════════════════════════════════════════════════
   PRODUCT-SCOPED PALETTES
   Activated via [data-product="name"] attribute selectors.
   Each product overrides: --p-bg, --p-headline, --p-emphasis,
   --p-subtitle, --p-rule-start, --p-rule-end,
   --p-wireframe-1, --p-wireframe-2, --p-identity.
   ═══════════════════════════════════════════════════════════ */

/* ── MSCS (master brand) ─────────────────────────────────── */
[data-product="mscs"] {
  --p-bg:            linear-gradient(145deg, #0A0A0E 0%, #111114 100%);
  --p-headline:      #6A6A6A;
  --p-emphasis:      #A85A30;
  --p-subtitle:      rgba(130, 130, 130, 0.4);
  --p-rule-start:    #A85A30;
  --p-rule-end:      #6A3818;
  --p-wireframe-1:   rgba(106, 106, 106, 0.08);
  --p-wireframe-2:   rgba(168, 90, 48, 0.06);
  --p-identity:      #A85A30;
}

/* ── Oracle ──────────────────────────────────────────────── */
[data-product="oracle"] {
  --p-bg:            linear-gradient(145deg, #0A0C10 0%, #12100A 100%);
  --p-headline:      #5E5545;
  --p-emphasis:      #8A6A18;
  --p-subtitle:      rgba(94, 85, 69, 0.4);
  --p-rule-start:    #8A6A18;
  --p-rule-end:      #5A4010;
  --p-wireframe-1:   rgba(94, 85, 69, 0.08);
  --p-wireframe-2:   rgba(138, 106, 24, 0.06);
  --p-identity:      #8A6A18;
}

/* ── Fronteiristas ───────────────────────────────────────── */
[data-product="fronteiristas"] {
  --p-bg:            linear-gradient(145deg, #0A0C10 0%, #111010 100%);
  --p-headline:      #5A5550;
  --p-emphasis:      #8A7A62;
  --p-subtitle:      rgba(90, 85, 80, 0.4);
  --p-rule-start:    #8A7A62;
  --p-rule-end:      #5A5040;
  --p-wireframe-1:   rgba(90, 85, 80, 0.08);
  --p-wireframe-2:   rgba(138, 122, 98, 0.06);
  --p-identity:      #8A7A62;
}

/* ── Neuro ───────────────────────────────────────────────── */
[data-product="neuro"] {
  --p-bg:            linear-gradient(145deg, #0A0C10 0%, #0E0E18 100%);
  --p-headline:      #4A4460;
  --p-emphasis:      #5A9AAA;
  --p-subtitle:      rgba(74, 68, 96, 0.4);
  --p-rule-start:    #5A9AAA;
  --p-rule-end:      #3A5A6A;
  --p-wireframe-1:   rgba(74, 68, 96, 0.08);
  --p-wireframe-2:   rgba(90, 154, 170, 0.06);
  --p-identity:      #5A9AAA;
}

/* ── Style ───────────────────────────────────────────────── */
[data-product="style"] {
  --p-bg:            linear-gradient(145deg, #0A0C10 0%, #131114 100%);
  --p-headline:      #5B4C50;
  --p-emphasis:      #9A6068;
  --p-subtitle:      rgba(91, 76, 80, 0.4);
  --p-rule-start:    #9A6068;
  --p-rule-end:      #6A3A42;
  --p-wireframe-1:   rgba(91, 76, 80, 0.08);
  --p-wireframe-2:   rgba(154, 96, 104, 0.06);
  --p-identity:      #9A6068;
}

/* ── Design ──────────────────────────────────────────────── */
[data-product="design"] {
  --p-bg:            linear-gradient(145deg, #0A0C10 0%, #0E1018 100%);
  --p-headline:      #4A5060;
  --p-emphasis:      #5A7A9A;
  --p-subtitle:      rgba(74, 80, 96, 0.4);
  --p-rule-start:    #5A7A9A;
  --p-rule-end:      #3A4A6A;
  --p-wireframe-1:   rgba(74, 80, 96, 0.08);
  --p-wireframe-2:   rgba(90, 122, 154, 0.06);
  --p-identity:      #5A7A9A;
}

/* ── Execution ───────────────────────────────────────────── */
[data-product="execution"] {
  --p-bg:            linear-gradient(145deg, #0A0C10 0%, #131008 100%);
  --p-headline:      #5A5040;
  --p-emphasis:      #9A7048;
  --p-subtitle:      rgba(90, 80, 64, 0.4);
  --p-rule-start:    #9A7048;
  --p-rule-end:      #6A4828;
  --p-wireframe-1:   rgba(90, 80, 64, 0.08);
  --p-wireframe-2:   rgba(154, 112, 72, 0.06);
  --p-identity:      #9A7048;
}