/* ============================================================
   ESDI DESIGN SYSTEM — DESIGN TOKENS
   Escola Superior de Disseny · Sabadell
   Drawn directly from the identity & typography manuals.
   ============================================================ */

/* ---------- FONT FACES ---------- */
@font-face {
  font-family: "Framer Sans";
  src: url("fonts/FramerSans700.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT";
  src: url("fonts/HelveticaNeueLT-55Roman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue LT";
  src: url("fonts/HelveticaNeueLT-55Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- CORPORATE NEUTRALS (primary palette) ---------- */
  --esdi-black:  #000000;   /* CMYK 0/0/0/100 · RGB 0/0/0 */
  --esdi-white:  #FFFFFF;   /* CMYK 0/0/0/0   · RGB 255/255/255 */
  --esdi-gray:   #E2E4E7;   /* CMYK 0/0/0/15  · Pantone Cool Gray 3 */

  /* ---------- CORPORATE ACCENTS (use ONE per composition, never combined) ---------- */
  --esdi-red:    #E65541;   /* Pantone Warm Red */
  --esdi-yellow: #FADC32;   /* Pantone Yellow 012 */
  --esdi-green:  #69AA96;   /* Pantone 7467 */
  --esdi-blue:   #7896C8;   /* Pantone 2192 */

  /* ---------- DERIVED INK STEPS (for body text, dividers, captions) ---------- */
  --esdi-ink-100: #000000;
  --esdi-ink-80:  #2A2A2A;
  --esdi-ink-60:  #6B6B6B;
  --esdi-ink-40:  #A8A8A8;
  --esdi-ink-20:  #D6D6D6;
  --esdi-ink-10:  #EDEDED;

  /* ---------- SEMANTIC (UI only — never poster/print) ---------- */
  --esdi-success: var(--esdi-green);
  --esdi-warning: var(--esdi-yellow);
  --esdi-danger:  var(--esdi-red);
  --esdi-info:    var(--esdi-blue);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "Framer Sans", "Helvetica Neue LT", Arial, sans-serif;
  --font-body:    "Helvetica Neue LT", Helvetica, Arial, sans-serif;

  /* Type scale (1.25 minor third — terse, editorial) */
  --type-12: 0.75rem;
  --type-14: 0.875rem;
  --type-16: 1rem;
  --type-18: 1.125rem;
  --type-20: 1.25rem;
  --type-24: 1.5rem;
  --type-32: 2rem;
  --type-40: 2.5rem;
  --type-56: 3.5rem;
  --type-80: 5rem;
  --type-120: 7.5rem;
  --type-200: 12.5rem;

  --lh-tight: 0.85;     /* for stacked display caps */
  --lh-snug:  1.05;     /* for two-line titles */
  --lh-body:  1.45;     /* body */
  --lh-loose: 1.65;     /* long-form body */

  /* ---------- SPACING (8pt grid) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 192px;

  /* ---------- RADII ---------- */
  /* ESDI is hard-edged. Default is ZERO. The only round element is the
     circular "E" corner badge. */
  --radius-none: 0;
  --radius-badge: 9999px;

  /* ---------- BORDERS ---------- */
  --hairline:   1px;
  --rule:       2px;
  --rule-bold:  4px;
  --border-color: var(--esdi-black);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;

  /* ---------- SHADOWS ---------- */
  /* The brand has no decorative shadows. UI gets one functional elevation. */
  --shadow-overlay: 0 24px 64px -16px rgba(0,0,0,0.18);

  /* ---------- Z ---------- */
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

/* Reset baseline */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--type-16);
  line-height: var(--lh-body);
  color: var(--esdi-black);
  background: var(--esdi-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }