/* =========================================================================
   Educbank Design System (EDS) — v3 dark mode
   Roxo profundo dominante (Nubank-style)
   ========================================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Satoshi Variable";
  src: url("../fonts/Satoshi-Variable.woff2") format("woff2-variations"),
       url("../fonts/Satoshi-Variable.ttf")  format("truetype-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi Variable";
  src: url("../fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi Variable";
  src: url("../fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi Variable";
  src: url("../fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi Variable";
  src: url("../fonts/Satoshi-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ─── PRIMITIVE COLORS ─── */
  /* Brand — paleta estendida com tons profundos para dark theme */
  --c-brand-50:  #efecfb;
  --c-brand-100: #e1ddf7;
  --c-brand-200: #c4bbef;
  --c-brand-300: #a699e8;
  --c-brand-400: #8977e0;
  --c-brand-500: #6b55d8;
  --c-brand-600: #5644ad;
  --c-brand-700: #403382;
  --c-brand-800: #2b2256;
  --c-brand-900: #1a1335;
  --c-brand-950: #100a22;
  --c-brand-975: #0a0814;

  /* Neutral */
  --c-n-50:  #f2f2f2;
  --c-n-100: #e5e5e5;
  --c-n-150: #d9d9d9;
  --c-n-200: #cccccc;
  --c-n-250: #bfbfbf;
  --c-n-300: #b2b2b2;
  --c-n-350: #a6a6a6;
  --c-n-400: #999999;
  --c-n-450: #8c8c8c;
  --c-n-500: #808080;
  --c-n-550: #737373;
  --c-n-600: #666666;
  --c-n-650: #595959;
  --c-n-700: #4d4d4d;
  --c-n-750: #404040;
  --c-n-800: #333333;
  --c-n-850: #262626;
  --c-n-900: #1a1a1a;
  --c-n-950: #0d0d0d;
  --c-white: #ffffff;
  --c-black: #000000;
  --c-black-10: #0000001a;
  --c-black-20: #00000033;
  --c-black-50: #00000080;

  /* Status colors — versões adaptadas para dark (mais saturadas/luminosas) */
  --c-blue-100:  #d6ddff;
  --c-blue-300:  #8599ff;
  --c-blue-400:  #5c77ff;
  --c-blue-500:  #6e8aff;
  --c-blue-600:  #2944cc;

  --c-green-100: #ccebd6;
  --c-green-300: #66c285;
  --c-green-400: #2ed670;
  --c-green-500: #2ed670;
  --c-green-600: #1fa850;
  --c-green-700: #005c1f;
  --c-green-800: #003d14;

  --c-yellow-300: #ffe066;
  --c-yellow-500: #ffcc33;
  --c-yellow-600: #cca300;
  --c-yellow-800: #665200;

  --c-orange-300: #ffb366;
  --c-orange-500: #ff9a3d;
  --c-orange-600: #cc6600;
  --c-orange-700: #994d00;

  --c-red-100: #facccc;
  --c-red-300: #ef6666;
  --c-red-400: #ea3333;
  --c-red-500: #ff5b6b;
  --c-red-600: #b70000;
  --c-red-700: #890000;
  --c-red-800: #5c0000;

  /* ─── SEMANTIC TOKENS (DARK MODE — roxo profundo) ─── */

  /* Surfaces — escala de elevação em roxo */
  --bg-canvas:            #0a0814;            /* fundo absoluto fora do device */
  --bg-app:               #100a22;            /* base do app */
  --surface-l1:           #1a1335;            /* cards, modals */
  --surface-l2:           #221a44;            /* cards elevados */
  --surface-l3:           #2b2256;            /* hover/pressed */
  --surface-overlay:      rgba(255,255,255,0.04);  /* glass leve */
  --surface-overlay-hi:   rgba(255,255,255,0.08);

  /* Background semânticos */
  --bg-primary:           #100a22;
  --bg-primary-hover:     #1a1335;
  --bg-primary-pressed:   #221a44;
  --bg-primary-selected:  rgba(107,85,216,0.18);
  --bg-primary-disabled:  rgba(255,255,255,0.04);
  --bg-primary-inverse:   #ffffff;
  --bg-secondary:         #0d0820;
  --bg-tertiary:          #1a1335;
  --bg-brand:             var(--c-brand-500);
  --bg-brand-hover:       var(--c-brand-400);
  --bg-brand-pressed:     var(--c-brand-600);
  --bg-brand-soft:        rgba(107,85,216,0.18);
  --bg-menu:              #100a22;
  --bg-menu-hover:        rgba(107,85,216,0.18);
  --bg-info-light:        rgba(110,138,255,0.16);
  --bg-warning-light:     rgba(255,204,51,0.16);
  --bg-risk-light:        rgba(255,154,61,0.16);
  --bg-danger-light:      rgba(255,91,107,0.16);
  --bg-success-light:     rgba(46,214,112,0.16);
  --bg-danger:            var(--c-red-500);
  --bg-success:           var(--c-green-500);

  /* Content — tudo claro sobre fundo escuro */
  --content-primary:           #ffffff;
  --content-secondary:         rgba(255,255,255,0.85);
  --content-tertiary:          rgba(255,255,255,0.55);
  --content-quaternary:         rgba(255,255,255,0.35);
  --content-primary-inverse:   #ffffff;       /* texto sobre brand fica branco */
  --content-on-brand:          #ffffff;
  --content-disabled:          rgba(255,255,255,0.30);
  --content-brand:             var(--c-brand-300);  /* roxo claro p/ destacar em dark */
  --content-brand-strong:      var(--c-brand-200);
  --content-link:              var(--c-blue-400);
  --content-link-hover:        var(--c-blue-300);
  --content-link-brand:        var(--c-brand-300);
  --content-info:              var(--c-blue-400);
  --content-info-bold:         var(--c-blue-300);
  --content-warning:           var(--c-yellow-500);
  --content-warning-bold:      var(--c-yellow-300);
  --content-risk:              var(--c-orange-500);
  --content-risk-bold:         var(--c-orange-300);
  --content-danger:            var(--c-red-500);
  --content-danger-bold:       var(--c-red-300);
  --content-negative:          var(--c-red-500);
  --content-negative-darker:   var(--c-red-300);
  --content-success:           var(--c-green-500);
  --content-success-darker:    var(--c-green-300);

  /* Border — sutis sobre superfícies escuras */
  --border-primary:     rgba(255,255,255,0.16);
  --border-secondary:   rgba(255,255,255,0.10);
  --border-tertiary:    rgba(255,255,255,0.06);
  --border-disabled:    rgba(255,255,255,0.04);
  --border-brand:       var(--c-brand-400);
  --border-focus:       var(--c-brand-300);
  --border-info:        var(--c-blue-400);
  --border-risk:        var(--c-orange-500);
  --border-danger:      var(--c-red-500);
  --border-success:     var(--c-green-500);
  --border-interactive: rgba(255,255,255,0.20);

  /* Overlay */
  --overlay-50: rgba(0,0,0,0.65);

  /* ─── SPACING ─── */
  --sp-3xs: 2px;
  --sp-2xs: 4px;
  --sp-xs:  8px;
  --sp-sm:  10px;
  --sp-md:  12px;
  --sp-lg:  14px;
  --sp-xl:  16px;
  --sp-2xl: 18px;
  --sp-3xl: 20px;
  --sp-4xl: 24px;
  --sp-5xl: 26px;
  --sp-6xl: 32px;

  /* ─── RADIUS ─── */
  --r-3xs: 2px;
  --r-2xs: 4px;
  --r-xs:  8px;
  --r-sm:  10px;
  --r-md:  12px;
  --r-lg:  14px;
  --r-xl:  16px;
  --r-2xl: 20px;
  --r-3xl: 24px;
  --r-4xl: 28px;
  --r-pill: 9999px;

  /* ─── ELEVATION (no dark, sombras mais fortes + glow brand sutil) ─── */
  --elev-1: 0 1px 2px 0 rgba(0,0,0,0.40);
  --elev-2: 0 4px 12px 0 rgba(0,0,0,0.40);
  --elev-3: 0 12px 32px 0 rgba(0,0,0,0.55);
  --elev-4: 0 20px 48px 0 rgba(0,0,0,0.65);
  --elev-glow: 0 0 0 1px rgba(107,85,216,0.30), 0 12px 40px -8px rgba(107,85,216,0.45);

  /* ─── MOTION ─── */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 360ms;

  /* ─── TYPE ─── */
  --font-base: "Satoshi Variable", "Satoshi", system-ui, -apple-system, sans-serif;
}

/* =========================================================================
   BASE
   ========================================================================= */
html, body {
  font-family: var(--font-base);
  color: var(--content-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── TYPE STYLES ─── */
.t-display-6xl-bold    { font-size: 40px; font-weight: 700; line-height: 44px; letter-spacing: -1.4px; }
.t-display-5xl-bold    { font-size: 32px; font-weight: 700; line-height: 40px; letter-spacing: -1px; }
.t-display-5xl-medium  { font-size: 32px; font-weight: 500; line-height: 40px; letter-spacing: -1px; }
.t-title-3xl-bold      { font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.5px; }
.t-title-3xl-medium    { font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: -0.5px; }
.t-subtitle-2xl-bold   { font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: -0.2px; }
.t-subtitle-2xl-medium { font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -0.2px; }
.t-body-l-bold         { font-size: 16px; font-weight: 700; line-height: 22px; }
.t-body-l-medium       { font-size: 16px; font-weight: 500; line-height: 22px; }
.t-body-l-regular      { font-size: 16px; font-weight: 400; line-height: 22px; }
.t-body-m-bold         { font-size: 14px; font-weight: 700; line-height: 20px; }
.t-body-m-medium       { font-size: 14px; font-weight: 500; line-height: 20px; }
.t-body-m-regular      { font-size: 14px; font-weight: 400; line-height: 20px; }
.t-body-s-bold         { font-size: 12px; font-weight: 700; line-height: 16px; }
.t-body-s-medium       { font-size: 12px; font-weight: 500; line-height: 16px; }
.t-body-s-regular      { font-size: 12px; font-weight: 400; line-height: 16px; }
.t-overline            { font-size: 11px; font-weight: 700; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; }

/* Tabular numbers */
.num { font-variant-numeric: tabular-nums lining-nums; }

/* Focus */
*:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}