/* =============================================================
   MODULOS PLAY — Foundations
   Colors + type tokens, light + dark themes
   ============================================================= */

/* Fontes: <link> no index.html, não @import aqui — o @import só é descoberto depois de baixar
   este arquivo e atrasa a primeira pintura. */

/* ============ TYPOGRAPHY TOKENS ============ */
:root {
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif; /* certificate / editorial only */

  /* Type scale — modular, 1.200 ratio, ramping wider at the top */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  15px;   /* body default — comfortable for long reading */
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;
  --text-6xl: 64px;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.55;   /* body text — accountant reading */
  --lh-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-base:   0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ============ SPACING + RADIUS + ELEVATION ============ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ============ BRAND COLORS (constants — same in both themes) ============ */
  --brand-navy:      #2E465E;
  --brand-navy-deep: #1B2C3E;
  --brand-teal:      #009D84;
  --brand-teal-deep: #007A60;
  --brand-coral:     #FA3E2B;
  --brand-coral-deep:#D4291A;

  /* Cores cadastradas no catálogo: as duas versões de Trilhas usam a mesma identidade. */
  --area-contabil:   #1784F3;
  --area-fiscal:     #F73340;
  --area-dp:         #FFC038;
  --area-financeiro: #12CC87;
}

/* ============ LIGHT THEME (default) ============ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces — warm off-white, NOT pure white */
  --bg:           #F6F7F4;   /* page background, slightly warm */
  --surface:      #FFFFFF;   /* cards, sheets */
  --surface-2:    #F0F2EE;   /* recessed wells, sidebar */
  --surface-3:    #E6E9E3;   /* hover wells */
  --overlay:      rgba(15, 26, 36, 0.55);

  /* Text */
  --text:         #0F1A24;   /* headings, primary text */
  --text-strong:  #06101A;
  --text-muted:   #5A6B7C;   /* secondary copy, labels */
  --text-subtle:  #8A9AAB;   /* tertiary, captions */
  --text-onbrand: #FFFFFF;   /* on navy / teal fills */
  --text-onprimary: #FFFFFF; /* on var(--primary)/--primary-hover/--primary-press fills only */

  /* Borders */
  --border:        #E1E5DC;
  --border-strong: #C8CFC2;
  --border-focus:  var(--brand-teal);

  /* Primary = navy (trust, structure, the wordmark color) */
  --primary:        var(--brand-navy);
  --primary-hover:  var(--brand-navy-deep);
  --primary-press:  #15263A;
  --primary-tint:   #E7ECF1;
  --primary-tint-2: #D2DAE3;

  /* Accent = teal (positive action, "play", progress, success) */
  --accent:         var(--brand-teal);
  --accent-hover:   var(--brand-teal-deep);
  --accent-press:   #006950;
  --accent-tint:    #D6F0EA;
  --accent-tint-2:  #A8DFD2;

  /* Semantic */
  --success:        #0E8F6E;
  --success-tint:   #D6F0EA;
  --warning:        #B97300;
  --warning-tint:   #FBEED6;
  --danger:         #C9241A;       /* slightly tamed from logo coral for legibility */
  --danger-tint:    #FCE4E0;
  --info:           #2E465E;
  --info-tint:      #E7ECF1;

  /* Shadows — soft, two-stop */
  --shadow-xs: 0 1px 2px rgba(15, 26, 36, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 26, 36, 0.05), 0 2px 6px rgba(15, 26, 36, 0.04);
  --shadow-md: 0 2px 4px rgba(15, 26, 36, 0.06), 0 8px 20px rgba(15, 26, 36, 0.06);
  --shadow-lg: 0 4px 8px rgba(15, 26, 36, 0.07), 0 16px 32px rgba(15, 26, 36, 0.08);
  --shadow-focus: 0 0 0 3px rgba(0, 157, 132, 0.28);

  /* Subtle gradient for hero / featured surfaces */
  --grad-brand: linear-gradient(135deg, #2E465E 0%, #1B2C3E 60%, #07182B 100%);
  --grad-soft:  linear-gradient(135deg, #F0F2EE 0%, #E7ECF1 100%);
}

/* ============ DARK THEME ============ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:           #0C1620;   /* night navy, not pure black */
  --surface:      #15212E;
  --surface-2:    #1D2D3C;
  --surface-3:    #283849;
  --overlay:      rgba(0, 0, 0, 0.6);

  --text:         #EDF1F5;
  --text-strong:  #FFFFFF;
  --text-muted:   #A5B5C5;
  --text-subtle:  #6B7C8E;
  --text-onbrand: #FFFFFF;
  /* --primary vira menta claro (#45D5B5) no escuro; branco sobre ele cai pra
     ~1.8:1. Texto sobre acento do canvas é #071D19 — token dedicado porque
     --text-onbrand também cobre fundos --accent/--danger/--grad-brand/--success,
     que continuam escuros no tema dark e pedem texto branco. */
  --text-onprimary: #071D19;

  --border:        #2A3949;
  --border-strong: #3D4F62;
  --border-focus:  #2BBFA3;

  /* In dark mode, teal becomes the visual lead because navy disappears into the background */
  --primary:        #45D5B5;        /* menta do canvas (AA sobre #0C1620) */
  --primary-hover:  #83E9CE;
  --primary-press:  #18A88D;
  --primary-tint:   rgba(69, 213, 181, 0.16);
  --primary-tint-2: rgba(43, 191, 163, 0.24);

  --accent:         #4F7AA6;        /* navy lifted */
  --accent-hover:   #6B92BB;
  --accent-press:   #3D6690;
  --accent-tint:    rgba(79, 122, 166, 0.16);
  --accent-tint-2:  rgba(79, 122, 166, 0.28);

  --success:        #2BBFA3;
  --success-tint:   rgba(43, 191, 163, 0.16);
  --warning:        #E0A436;
  --warning-tint:   rgba(224, 164, 54, 0.16);
  --danger:         #F0563F;
  --danger-tint:    rgba(240, 86, 63, 0.16);
  --info:           #6B92BB;
  --info-tint:      rgba(107, 146, 187, 0.16);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px rgba(43, 191, 163, 0.35);

  --grad-brand: linear-gradient(135deg, #15212E 0%, #1E2C3B 50%, #0C1620 100%);
  --grad-soft:  linear-gradient(135deg, #1E2C3B 0%, #15212E 100%);
}

/* ============ ELEMENT DEFAULTS ============ */
html, body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text-strong);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-5xl); font-weight: 800; }
h2 { font-size: var(--text-4xl); font-weight: 800; }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl);  letter-spacing: var(--tracking-snug); }
h5 { font-size: var(--text-lg);  letter-spacing: var(--tracking-snug); }
h6 { font-size: var(--text-md);  letter-spacing: var(--tracking-snug); }

p  { margin: 0; line-height: var(--lh-base); text-wrap: pretty; }

small, .text-caption { font-size: var(--text-xs); color: var(--text-muted); }

.text-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.text-mono { font-family: var(--font-mono); font-feature-settings: "tnum", "ss01"; }
.tabular   { font-variant-numeric: tabular-nums; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

a { color: var(--accent-hover); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--accent-tint-2); color: var(--text-strong); }

/* Focus ring (keyboard) */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}