/* ============================================================
   Salesforce Brand System — Skills Framework LATAM FY27
   Typography · Color · Gradients · Frosted glass · Sparkles · A11y
   Assets: public/assets/brand/  (local only)
   ============================================================ */

/* ── FONTS ─────────────────────────────────────────────── */
@font-face{
  font-family:'AvantGarde';
  src:url('assets/brand/fonts/AvantGarde-Demi.woff') format('woff');
  font-weight:400 800;font-display:swap;
}
@font-face{
  font-family:'Salesforce Sans';
  src:url('assets/brand/fonts/SalesforceSans-Light.woff') format('woff');
  font-weight:300;font-display:swap;
}
@font-face{
  font-family:'Salesforce Sans';
  src:url('assets/brand/fonts/SalesforceSans-Regular.woff') format('woff');
  font-weight:400;font-display:swap;
}
@font-face{
  font-family:'Salesforce Sans';
  src:url('assets/brand/fonts/SalesforceSans-Semibold.woff') format('woff');
  font-weight:600;font-display:swap;
}
@font-face{
  font-family:'Salesforce Sans';
  src:url('assets/brand/fonts/SalesforceSans-Bold.woff') format('woff');
  font-weight:700 900;font-display:swap;
}

/* ── TOKENS ────────────────────────────────────────────── */
:root{
  /* Main Colors.png — 6 azules oficiales + blanco. NO usar otros. */
  --eb15:#001E5B; /* Electric Blue 15  (dark blue, headings on light) */
  --eb30:#022AC0; /* Electric Blue 30 */
  --eb50:#066AFE; /* Electric Blue 50 */
  --cb68:#00B3FF; /* Cloud Blue 68 */
  --cb80:#90D0FE; /* Cloud Blue 80 */
  --cb95:#EAF5FE; /* Cloud Blue 95 (lightest surface) */
  --white:#ffffff;

  /* Aliases semánticos */
  --brand-deep:    var(--eb15);
  --brand-navy:    var(--eb30);
  --brand-electric:var(--eb50);
  --brand-sky:     var(--cb68);

  /* GRADIENTES (Colors/ — light→dark = Morning→Evening) ───
     WCAG: el blanco solo es legible sobre stops ≤ #066AFE (4.67:1).
     #00B3FF/#90D0FE/#EAF5FE fallan con blanco.                    */
  /* Morning — todo claro → SOLO texto deep (#001E5B) */
  --grad-morning: linear-gradient(180deg,#90D0FE 0%,#EAF5FE 100%);
  /* Midday — claro → SOLO texto deep */
  --grad-midday:  linear-gradient(180deg,#00B3FF 0%,#90D0FE 52%,#EAF5FE 100%);
  /* Dusk — se aclara abajo → texto deep (blanco falla al pie) */
  --grad-dusk:    linear-gradient(180deg,#066AFE 0%,#00B3FF 33%,#90D0FE 80%,#EAF5FE 100%);
  /* Evening — oscuro a oscuro. Capado en #066AFE para que el BLANCO
     pase AA-body en toda la altura del panel (no llega a #00B3FF). */
  --grad-evening: linear-gradient(180deg,#001E5B 0%,#022AC0 38%,#066AFE 100%);
  /* Hero por defecto = Evening seguro para texto blanco */
  --hero-gradient: var(--grad-evening);

  --bg:#F4F9FE;            /* superficie base, tinte cloud */
  --border:#d6e3f5;
  --text:#0a1730;
  --muted:#5b6b85;

  /* Niveles 1-5 (mantengo semáforo funcional) */
  --l1:#c62828; --l1-bg:#fde8e8;
  --l2:#e65100; --l2-bg:#fff0e6;
  --l3:#b45309; --l3-bg:#fffbeb;
  --l4:#2e7d32; --l4-bg:#e8f5e9;
  --l5:#1565c0; --l5-bg:#e3f2fd;

  /* Roles */
  --role-architect:#ff7d00;
  --role-se:#066AFE;
  --role-builder:#2e7d32;
  --role-specialist:#6a1b9a;

  --shadow:0 4px 16px rgba(0,30,91,.08);
  --shadow-lg:0 12px 34px rgba(0,30,91,.14);
  --r:12px; --rl:22px;

  /* Frosted glass */
  --glass-bg:rgba(255,255,255,.62);
  --glass-bg-dark:rgba(0,30,91,.34);
  --glass-border:rgba(255,255,255,.55);
  --glass-blur:saturate(160%) blur(14px);
}

/* ── BASE TYPOGRAPHY ───────────────────────────────────── */
body{
  font-family:'Salesforce Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);
  line-height:1.55;font-size:14px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,.headline,.hero h1,.section-title,.modal-title{
  font-family:'AvantGarde','Salesforce Sans',sans-serif;
}

/* ── SKIP LINK + A11Y FOCUS ────────────────────────────── */
.skip-link{
  position:absolute;left:12px;top:-48px;z-index:2000;
  background:var(--eb15);color:#fff;font-weight:700;
  padding:10px 18px;border-radius:0 0 10px 10px;
  text-decoration:none;transition:top .15s;
  font-family:'Salesforce Sans',sans-serif;
}
.skip-link:focus{top:0}

/* Outline de alto contraste — pasa 3:1 sobre cualquier gradiente.
   Doble anillo (deep + blanco) garantiza visibilidad en claro y oscuro. */
a:focus-visible,button:focus-visible,
.pill-btn:focus-visible,.grade-btn:focus-visible,
.gpill:focus-visible,.chip:focus-visible,
[role="button"]:focus-visible,select:focus-visible,
input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--eb15);
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(255,255,255,.95);
  border-radius:8px;
}
/* Sobre fondos oscuros (hero/nav) invertimos: anillo blanco + halo azul */
.nav a:focus-visible,.hero a:focus-visible,.hero button:focus-visible,
.frost-dark a:focus-visible,.frost-dark button:focus-visible{
  outline:3px solid #fff;
  box-shadow:0 0 0 6px rgba(0,30,91,.85);
}

/* ── FROSTED GLASS ─────────────────────────────────────── */
.frost{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
}
.frost-dark{
  background:var(--glass-bg-dark);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.28);
}

/* ── LOGO CHIP (frosted, blanco — nunca recolorear el SVG) ── */
.logo-chip{
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid rgba(255,255,255,.7);
  border-radius:14px;padding:8px 12px;box-shadow:0 6px 18px rgba(0,30,91,.18);
}
.logo-chip img{height:26px;width:auto;display:block}

/* ── SPARKLES ──────────────────────────────────────────────
   Solo en bandas de padding (bordes izq/der y franjas sup/inf).
   NUNCA centradas ni sobre texto. Cap 48px. aria-hidden.       */
.sparkle{
  position:absolute;pointer-events:none;user-select:none;
  width:36px;height:36px;max-width:48px;z-index:2;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.sp-yellow{background-image:url('assets/brand/sparkles/yellow-main.svg')}
.sp-yellow-i{background-image:url('assets/brand/sparkles/yellow-inclined.svg')}
.sp-blue{background-image:url('assets/brand/sparkles/blue-main.svg')}
.sp-blue-i{background-image:url('assets/brand/sparkles/blue-inclined.svg')}
.sp-blue-i2{background-image:url('assets/brand/sparkles/blue-inclined-2.svg')}
/* Posiciones: franjas de padding. left/right ≤ 56px desde el borde. */
.sp-tl{top:18px;left:22px;width:42px;height:42px;transform:rotate(-14deg)}
.sp-tr{top:26px;right:30px;width:30px;height:30px;transform:rotate(12deg)}
.sp-bl{bottom:20px;left:40px;width:26px;height:26px;transform:rotate(-6deg)}
.sp-br{bottom:24px;right:46px;width:34px;height:34px;transform:rotate(18deg)}

/* ── PHOTO MASK (Forms/Subtract-*.svg) ─────────────────── */
.masked-photo{
  -webkit-mask:var(--mask) center/contain no-repeat;
  mask:var(--mask) center/contain no-repeat;
  object-fit:cover;
}
.mask-1{--mask:url('assets/brand/forms/Subtract.svg')}
.mask-2{--mask:url('assets/brand/forms/Subtract-2.svg')}
.mask-3{--mask:url('assets/brand/forms/Subtract-3.svg')}
.mask-5{--mask:url('assets/brand/forms/Subtract-5.svg')}
.mask-6{--mask:url('assets/brand/forms/Subtract-6.svg')}

/* ── REDUCED MOTION ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}