/* ============================================================
   Upskillia — Brand tokens (from the Upskillia Design System, v2)
   Light + dark themes. Single source of truth for the site.

   Rebrand v2: one brand colour Azul. Tinta = system black, Papel = system white.
   Token NAMES are kept from v1 (--navy, --violet, --paper …) so every existing
   var() reference rebrands by value swap; their MEANING is now:
     --navy   = Tinta  (system black / dark surfaces)
     --violet = Azul   (the one brand colour — accents, links, active, focus)
     --btn    = Azul profundo (button fill that carries white text, AA-large)
     --paper  = Papel  (system white / canvas)
   ============================================================ */

/* Self-hosted Upskillia webfont — 18 cuts (100–900 + italics), latin subset.
   Proprietary © Upskillia. @font-face inlined so it loads without nested @import. */
@font-face{font-family:'Upskillia';font-style:normal;font-weight:100;font-display:swap;src:url('../assets/fonts/upskillia-latin-100-normal.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-100-normal.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:italic;font-weight:100;font-display:swap;src:url('../assets/fonts/upskillia-latin-100-italic.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-100-italic.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:normal;font-weight:200;font-display:swap;src:url('../assets/fonts/upskillia-latin-200-normal.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-200-normal.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:italic;font-weight:200;font-display:swap;src:url('../assets/fonts/upskillia-latin-200-italic.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-200-italic.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:normal;font-weight:300;font-display:swap;src:url('../assets/fonts/upskillia-latin-300-normal.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-300-normal.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:italic;font-weight:300;font-display:swap;src:url('../assets/fonts/upskillia-latin-300-italic.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-300-italic.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/upskillia-latin-400-normal.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-400-normal.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:italic;font-weight:400;font-display:swap;src:url('../assets/fonts/upskillia-latin-400-italic.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-400-italic.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/upskillia-latin-500-normal.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-500-normal.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:italic;font-weight:500;font-display:swap;src:url('../assets/fonts/upskillia-latin-500-italic.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-500-italic.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/upskillia-latin-600-normal.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-600-normal.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:italic;font-weight:600;font-display:swap;src:url('../assets/fonts/upskillia-latin-600-italic.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-600-italic.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/upskillia-latin-700-normal.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-700-normal.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:italic;font-weight:700;font-display:swap;src:url('../assets/fonts/upskillia-latin-700-italic.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-700-italic.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/upskillia-latin-800-normal.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-800-normal.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:italic;font-weight:800;font-display:swap;src:url('../assets/fonts/upskillia-latin-800-italic.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-800-italic.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:normal;font-weight:900;font-display:swap;src:url('../assets/fonts/upskillia-latin-900-normal.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-900-normal.woff') format('woff')}
@font-face{font-family:'Upskillia';font-style:italic;font-weight:900;font-display:swap;src:url('../assets/fonts/upskillia-latin-900-italic.woff2') format('woff2'),url('../assets/fonts/upskillia-latin-900-italic.woff') format('woff')}

:root {
  /* ---------- Brand & Palette ---------- */
  --navy:   #10161C;          /* Tinta — system black, dark surfaces */
  --paper:  #F4F7FB;          /* Papel — default canvas */
  --violet: #3DA1FF;          /* Azul — the one brand colour (accents, links, active, focus) */
  --violet-press: #1569C7;    /* azul hover/active darken */
  --btn:        #1C7FE5;      /* Azul profundo — button fill that carries white text (AA-large) */
  --btn-press:  #1569C7;      /* button hover darken */
  --mist:   #E3E9F1;
  --line:   #E3E9F1;
  --white:  #FFFFFF;

  /* ---------- Text ---------- */
  --ink:        #10161C;
  --muted:      #586472;
  --on-dark:    #F4F7FB;
  --on-dark-soft: #9AA7B8;

  /* ---------- Semantic ---------- */
  --ok:   #16A34A;  --ok-text:   #15803D;
  --no:   #DC2626;  --no-text:   #B91C1C;
  --warn: #D97706;

  --violet-tint: rgba(61,161,255,.14);
  --violet-tint-text: #1C7FE5;
  --navy-tint:   rgba(16,22,28,.10);
  --ok-tint:     rgba(22,163,74,.12);
  --no-tint:     rgba(220,38,38,.10);
  --ghost-fill:  rgba(16,22,28,.06);

  /* surface helpers used by site components */
  --canvas: var(--paper);     /* page background */
  --card:   #FFFFFF;          /* card surface */
  --nav-bg: rgba(244,247,251,.82);
  --violet-soft: #1C7FE5;     /* azul text/icon on light where legibility matters */
  --violet-on-dark: #3DA1FF;  /* bright azul for icons/accents on tinta (AA 6.71:1) */
  --hairline-on-dark: rgba(255,255,255,.12);

  /* ---------- Typography ---------- */
  --font-sans: 'Upskillia', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-extrabold: 800; --w-black: 900;

  --display-size: 46px;   --display-lh: 1.0;   --display-ls: -0.02em;
  --h1-size: 34px;        --h1-lh: 1.15;       --h1-ls: -0.005em;
  --h2-size: 26px;        --h2-lh: 1.2;        --h2-ls: -0.003em;
  --h3-size: 20px;        --h3-lh: 1.3;        --h3-ls: 0;
  --body-lg-size: 19px;   --body-lh: 1.6;
  --body-size: 17px;
  --body-sm-size: 15px;
  --label-size: 13.5px;   --label-lh: 1.4;
  --caption-size: 13px;   --caption-ls: 0.1em;
  --overline-size: 12px;  --overline-ls: 0.18em;
  --idx-size: 13px;       --idx-ls: 0.04em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
  --sp-12: 48px; --sp-16: 64px;
  --sp-section: clamp(72px, 11vw, 128px);

  /* ---------- Layout ---------- */
  --container: 1120px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ---------- Radius ---------- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 10px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px;
  --r-pill: 999px; --r-full: 50%;

  /* ---------- Elevation & motion ---------- */
  --shadow-hover: 0 1px 4px rgba(16,22,28,.08);
  --nav-blur: saturate(180%) blur(14px);
  --ease-micro: 0.2s ease;
  --ease-reveal: 0.42s cubic-bezier(0.16, 1, 0.3, 1);  /* signature ascending ease */
}

/* ============================================================
   Dark theme — tinta canvas, elevation drawn with light (not shadow).
   Elevation ramp: #10161C → #171F27 → #1E2933 → #26323E.
   Azul is AA text on tinta (6.71:1), so it works as an action colour here.
   ============================================================ */
html[data-theme="dark"] {
  --canvas: #10161C;          /* canvas — tinta */
  --white:  #1E2933;          /* card surface (elevation step 2) */
  --card:   #1E2933;
  --navy:   #171F27;          /* dark bands — lifted one step from canvas */
  --mist:   rgba(255,255,255,.10);
  --line:   rgba(255,255,255,.10);

  --ink:    #F4F7FB;
  --muted:  #9AA7B8;

  --nav-bg: rgba(16,22,28,.82);
  --ghost-fill:  rgba(255,255,255,.07);
  --navy-tint:   rgba(255,255,255,.10);
  --violet:      #3DA1FF;      /* bright azul is already AA on tinta */
  --violet-on-dark: #3DA1FF;
  --violet-tint: rgba(61,161,255,.22);
  --violet-tint-text: #7CC0FF;

  /* semantics recalculated for dark (all AA on the tinta ramp) */
  --ok:   #34D073;  --ok-text:   #34D073;
  --no:   #F87171;  --no-text:   #F87171;
  --warn: #F5B84D;

  --shadow-hover: 0 1px 6px rgba(0,0,0,.45);
}

/* ============================================================
   Type utility classes
   Heading weights apply the +1 optical remap for the Upskillia face
   (display/H1 → 800, H2/H3 → 700).
   ============================================================ */
.u-display { font: var(--w-extrabold) var(--display-size)/var(--display-lh) var(--font-sans); letter-spacing: var(--display-ls); color: var(--ink); }
.u-hero-light { font-family: var(--font-sans); font-weight: var(--w-light); font-size: clamp(26px, 5vw, 46px); line-height: 1.22; letter-spacing: -0.01em; color: var(--ink); }
.u-h1 { font: var(--w-extrabold) var(--h1-size)/var(--h1-lh) var(--font-sans); letter-spacing: var(--h1-ls); color: var(--ink); }
.u-h2 { font: var(--w-bold) var(--h2-size)/var(--h2-lh) var(--font-sans); letter-spacing: var(--h2-ls); color: var(--ink); }
.u-h3 { font: var(--w-bold) var(--h3-size)/var(--h3-lh) var(--font-sans); color: var(--ink); }
.u-body-lg { font: var(--w-regular) var(--body-lg-size)/var(--body-lh) var(--font-sans); color: var(--muted); }
.u-body { font: var(--w-regular) var(--body-size)/var(--body-lh) var(--font-sans); color: var(--muted); }
.u-body-sm { font: var(--w-regular) var(--body-sm-size)/var(--body-lh) var(--font-sans); color: var(--muted); }
.u-label { font: var(--w-semibold) var(--label-size)/var(--label-lh) var(--font-sans); color: var(--ink); }
.u-caption { font: var(--w-semibold) var(--caption-size)/var(--label-lh) var(--font-sans); letter-spacing: var(--caption-ls); color: var(--muted); }
.u-overline { font: var(--w-bold) var(--overline-size)/var(--label-lh) var(--font-sans); letter-spacing: var(--overline-ls); text-transform: uppercase; color: var(--muted); }
.u-idx { font: var(--w-extrabold) var(--idx-size)/var(--label-lh) var(--font-sans); letter-spacing: var(--idx-ls); font-variant-numeric: tabular-nums; color: var(--violet); }