/* ============================================================
   ARZENDENT — COLORS & TYPOGRAPHY
   Source of truth for brand tokens. Import once at the root.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: "Aspekta"; font-weight: 200; font-style: normal; font-display: swap;
  src: url("fonts/Aspekta-200.otf") format("opentype"); }
@font-face { font-family: "Aspekta"; font-weight: 250; font-style: normal; font-display: swap;
  src: url("fonts/Aspekta-250.otf") format("opentype"); }
@font-face { font-family: "Aspekta"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("fonts/Aspekta-300.otf") format("opentype"); }
@font-face { font-family: "Aspekta"; font-weight: 350; font-style: normal; font-display: swap;
  src: url("fonts/Aspekta-350.otf") format("opentype"); }
@font-face { font-family: "Aspekta"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/Aspekta-400.otf") format("opentype"); }
@font-face { font-family: "Aspekta"; font-weight: 450; font-style: normal; font-display: swap;
  src: url("fonts/Aspekta-450.otf") format("opentype"); }
@font-face { font-family: "Aspekta"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/Aspekta-500.otf") format("opentype"); }
@font-face { font-family: "Aspekta"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/Aspekta-600.otf") format("opentype"); }
@font-face { font-family: "Aspekta"; font-weight: 650; font-style: normal; font-display: swap;
  src: url("fonts/Aspekta-650.otf") format("opentype"); }
@font-face { font-family: "Aspekta"; font-weight: 750; font-style: normal; font-display: swap;
  src: url("fonts/Aspekta-750.otf") format("opentype"); }

:root {
  /* ================= COLORS =================
     The Arzendent system is deliberately monochrome: one deep
     brand blue (sampled from the logo) + a clean warm-white paper
     tone + a neutral ink scale. No secondary hue. This is the core
     of the "clinical precision" aesthetic.
  */

  /* Brand palette — from the Manual de Marca (official).
     Azul Arzendent is the only blue; Coral Orange and Summer Sky are
     the two secondary accents (gradients, acentos, destacar textos).
     White and Black complete the palette. */
  --arz-blue:        #080A75;   /* Azul Arzendent — RGB 8·10·117 */
  --arz-coral:       #EA6144;   /* Coral Orange — RGB 234·97·68 */
  --arz-sky:         #80BEFF;   /* Summer Sky — RGB 128·190·255 */
  --arz-white:       #FFFFFF;
  --arz-black:       #000000;

  /* Legacy aliases resolve to the single brand blue (no tints). */
  --arz-blue-900:    #080A75;
  --arz-blue-800:    #080A75;
  --arz-blue-700:    #080A75;
  --arz-blue-600:    #080A75;
  --arz-blue-500:    #080A75;
  --arz-blue-400:    #080A75;
  --arz-blue-300:    #E3E3EA;   /* was tint → now neutral line */
  --arz-blue-200:    #EEEEF3;
  --arz-blue-100:    #F3F3EE;   /* tinted surface → paper-2 */
  --arz-blue-50:     #FAFAF7;

  /* Neutrals — warm, paper-leaning */
  --arz-ink:         #0B0B14;   /* body text on light */
  --arz-ink-2:       #2A2B3A;   /* secondary text */
  --arz-ink-3:       #5B5C6C;   /* tertiary / meta */
  --arz-ink-4:       #8A8B98;   /* muted / disabled */
  --arz-line:        #E3E3EA;   /* hairline divider */
  --arz-line-2:      #EEEEF3;   /* soft divider */
  --arz-surface:     #FFFFFF;   /* pure card surface */
  --arz-paper:       #FAFAF7;   /* page background, warm off-white */
  --arz-paper-2:     #F3F3EE;   /* alt section */

  /* Semantic (reserved, used sparingly) */
  --arz-success:     #1E7A4E;
  --arz-warning:     #B56A00;
  --arz-danger:      #B42318;

  /* Semantic aliases */
  --fg-1:            var(--arz-ink);
  --fg-2:            var(--arz-ink-2);
  --fg-3:            var(--arz-ink-3);
  --fg-muted:        var(--arz-ink-4);
  --fg-brand:        var(--arz-blue);
  --fg-on-brand:     #FFFFFF;

  --bg-page:         var(--arz-paper);
  --bg-surface:      var(--arz-surface);
  --bg-alt:          var(--arz-paper-2);
  --bg-brand:        var(--arz-blue);
  --bg-brand-soft:   var(--arz-blue-100);

  --border-hairline: var(--arz-line);
  --border-soft:     var(--arz-line-2);
  --border-strong:   var(--arz-ink);

  /* ================= TYPE =================
     Aspekta is the single typeface. It is a low-contrast geometric
     sans, humanist without warmth — it reads as "engineered" and
     sits naturally next to CAD/technical imagery. We use a tight
     weight ladder: 300 / 400 / 500 / 650.
     The distinctive note: display-size headings are set in 650
     while the wordmark mark uses a custom cut; body copy is 400
     with a generous 1.55 line-height. ALL-CAPS eyebrows use 500
     with +0.12em tracking.
  */
  --font-sans:    "Aspekta", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  --font-display: "Aspekta", ui-sans-serif, system-ui, sans-serif;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    650;   /* Aspekta's "semibold-ish"; our "bold" */
  --fw-black:   750;

  /* Type scale — fluid-ish but simple.
     Display numbers are intentionally large; headings are tight.  */
  --fs-display-xl: clamp(56px, 7.2vw, 112px);
  --fs-display-l:  clamp(44px, 5.4vw, 80px);
  --fs-display-m:  clamp(36px, 4.2vw, 64px);
  --fs-h1:         clamp(32px, 3.6vw, 52px);
  --fs-h2:         clamp(26px, 2.6vw, 38px);
  --fs-h3:         clamp(20px, 1.6vw, 26px);
  --fs-h4:         18px;
  --fs-body-l:     18px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-meta:       13px;
  --fs-eyebrow:    12px;

  --lh-tight:   1.02;
  --lh-snug:    1.12;
  --lh-body:    1.55;
  --lh-meta:    1.4;

  --tr-eyebrow: 0.14em;
  --tr-display: -0.02em;
  --tr-tight:   -0.01em;
  --tr-normal:  0em;

  /* ================= SHAPE & SPACING ================= */
  --r-xs:  4px;
  --r-s:   8px;
  --r-m:   12px;
  --r-l:   18px;
  --r-xl:  24px;
  --r-pill: 999px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* shadows — low-key, paper-like. No heavy drop shadows. */
  --shadow-1: 0 1px 2px rgba(8,10,117,0.04), 0 1px 1px rgba(8,10,117,0.03);
  --shadow-2: 0 2px 6px rgba(8,10,117,0.05), 0 1px 2px rgba(8,10,117,0.04);
  --shadow-3: 0 12px 32px -12px rgba(8,10,117,0.18), 0 4px 10px -4px rgba(8,10,117,0.08);
  --shadow-inset: inset 0 0 0 1px var(--arz-line);

  /* motion */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-med:  240ms;
  --dur-slow: 420ms;
}

/* ================= SEMANTIC ELEMENTS =================
   These are opt-in helpers. Do not rely on them globally —
   components should pull tokens directly. */

.arz-body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01";
}

.arz-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.arz-display-xl { font-family: var(--font-display); font-size: var(--fs-display-xl); font-weight: var(--fw-bold); letter-spacing: var(--tr-display); line-height: var(--lh-tight); color: var(--fg-brand); }
.arz-display-l  { font-family: var(--font-display); font-size: var(--fs-display-l);  font-weight: var(--fw-bold); letter-spacing: var(--tr-display); line-height: var(--lh-tight); color: var(--fg-brand); }
.arz-display-m  { font-family: var(--font-display); font-size: var(--fs-display-m);  font-weight: var(--fw-bold); letter-spacing: var(--tr-display); line-height: var(--lh-snug);  color: var(--fg-brand); }

.arz-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-bold);    letter-spacing: var(--tr-tight); line-height: var(--lh-snug); color: var(--fg-1); }
.arz-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-semi);    letter-spacing: var(--tr-tight); line-height: var(--lh-snug); color: var(--fg-1); }
.arz-h3 { font-family: var(--font-sans);    font-size: var(--fs-h3); font-weight: var(--fw-medium); letter-spacing: var(--tr-normal); line-height: var(--lh-snug); color: var(--fg-1); }
.arz-h4 { font-family: var(--font-sans);    font-size: var(--fs-h4); font-weight: var(--fw-medium); letter-spacing: var(--tr-normal); line-height: var(--lh-snug); color: var(--fg-1); }

.arz-p    { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); text-wrap: pretty; }
.arz-p-l  { font-size: var(--fs-body-l); line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
.arz-meta { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--fg-3); }

.arz-mono { font-family: var(--font-mono); font-size: 0.92em; }

/* selection styled to brand */
::selection { background: var(--arz-blue); color: #fff; }