/* =========================================================
   FACTORY BRAGA — colors_and_type.css
   Single source of truth for tokens. Import this anywhere.
   Last revised: May 2026 — DS v2 (post-2018 manual)
   ========================================================= */

/* ---------- WEB FONTS ----------
   ClanOT (FontFont) — licensed brand display family. Now wired
   from local /fonts/ as of May 2026. Manrope proxy retired.

   Roboto is loaded from Google Fonts.
   Caveat (accent script) is loaded from Google Fonts.
   JetBrains Mono powers tabular meta / eyebrow lines.
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Caveat:wght@500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* --- ClanOT · regular width (default for "ClanOT") --- */
@font-face {
  font-family: 'ClanOT';
  src: url('fonts/FF_Clan_OT_Thin.otf') format('opentype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ClanOT';
  src: url('fonts/FF_Clan_OT_News.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ClanOT';
  src: url('fonts/FF_Clan_OT_Book.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ClanOT';
  src: url('fonts/FF_Clan_OT_Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ClanOT';
  src: url('fonts/FF_Clan_OT_Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ClanOT';
  src: url('fonts/FF_Clan_OT_Black.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ClanOT';
  src: url('fonts/FF_Clan_OT_Ultra.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* --- ClanOT Narrow · condensed companion (use "ClanOT Narrow") --- */
@font-face {
  font-family: 'ClanOT Narrow';
  src: url('fonts/FF_Clan_OT_Narrow_Thin.otf') format('opentype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ClanOT Narrow';
  src: url('fonts/FF_Clan_OT_Narrow_News.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ClanOT Narrow';
  src: url('fonts/FF_Clan_OT_Narrow_Book.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ClanOT Narrow';
  src: url('fonts/FF_Clan_OT_Narrow_Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ClanOT Narrow';
  src: url('fonts/FF_Clan_OT_Narrow_Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ClanOT Narrow';
  src: url('fonts/FF_Clan_OT_Narrow_Black.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'ClanOT Narrow';
  src: url('fonts/FF_Clan_OT_Narrow_Ultra.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* =========================================================
     COLORS · BRAND
     ========================================================= */
  --fy-orange:        #FF7B03;  /* SAGRADO — 15-year equity, only logo colour */
  --fy-orange-deep:   #E66E00;  /* hover / press on primary */
  --fy-orange-soft:   #FFE7D1;  /* tinted badge bg */
  --fy-orange-tint:   #FFF5E8;  /* faintest wash, never used as text */

  /* =========================================================
     COLORS · BASE (ink & paper)
     The canonical "preto teal" replaces pure black everywhere.
     ========================================================= */
  --fy-teal:          #062934;  /* canonical — Manual 2018, body text on light */
  --fy-teal-90:       rgba(6, 41, 52, 0.92);
  --fy-teal-60:       rgba(6, 41, 52, 0.60);
  --fy-teal-40:       rgba(6, 41, 52, 0.40);
  --fy-teal-20:       rgba(6, 41, 52, 0.20);
  --fy-teal-12:       rgba(6, 41, 52, 0.12);
  --fy-teal-08:       rgba(6, 41, 52, 0.08);
  --fy-teal-04:       rgba(6, 41, 52, 0.04);

  --fy-cream:         #EEEAE4;  /* Instagram informational bg */
  --fy-off-white:     #F8F9FB;  /* site default bg */
  --fy-white:         #FFFFFF;

  --fy-paper:         var(--fy-cream); /* default surface for editorial pieces */

  /* =========================================================
     COLORS · ACCENT (deprecated as sub-brands, kept as accents)
     The 2018 manual proposed green=Academy, blue=Recruitment.
     Those sub-brands were never launched / are retired.
     Use sparingly: campaign badges, status pills, never as identity.
     ========================================================= */
  --fy-green:         #00CC8B;  /* badges: open, certified, in-progress */
  --fy-green-deep:    #00B57A;
  --fy-blue:          #0061FF;  /* rare — only event series, never body */
  --fy-red:           #C0392B;  /* destructive / errata only */

  /* =========================================================
     COLORS · SEMANTIC (alias the brand tokens above)
     ========================================================= */
  --bg:               var(--fy-cream);
  --bg-elevated:      var(--fy-white);
  --bg-inverse:       var(--fy-teal);
  --bg-site:          var(--fy-off-white);

  --fg:               var(--fy-teal);          /* primary text on light */
  --fg-muted:         var(--fy-teal-60);
  --fg-faint:         var(--fy-teal-40);
  --fg-inverse:       var(--fy-white);         /* primary text on dark */
  --fg-inverse-muted: rgba(255, 255, 255, 0.70);
  --fg-inverse-faint: rgba(255, 255, 255, 0.45);

  --accent:           var(--fy-orange);
  --accent-hover:     var(--fy-orange-deep);
  --on-accent:        var(--fy-white);

  --border:           var(--fy-teal-12);
  --border-strong:    var(--fy-teal-20);
  --border-inverse:   rgba(255, 255, 255, 0.12);

  /* =========================================================
     TYPE · FAMILIES
     ========================================================= */
  --font-display:  'ClanOT', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display-narrow: 'ClanOT Narrow', 'ClanOT', system-ui, -apple-system, sans-serif;
  --font-body:     'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-script:   'Caveat', 'Segoe Script', cursive;

  /* =========================================================
     TYPE · SCALE (px values — match site & decks)
     Display: ClanOT 800, tight tracking. Mono: spaced eyebrows.
     ========================================================= */
  --fs-hero:       104px; /* hero h1 — clamp it in practice */
  --fs-display:     72px;
  --fs-h1:          48px;
  --fs-h2:          32px;
  --fs-h3:          22px;
  --fs-h4:          18px;
  --fs-body:        16px;
  --fs-small:       13px;
  --fs-eyebrow:     12px;
  --fs-script:      56px;

  --lh-tight:    0.92;   /* @kind font */
  --lh-snug:     1.10;   /* @kind font */
  --lh-normal:   1.55;   /* @kind font */
  --lh-loose:    1.70;   /* @kind font */

  --tk-hero:    -3.0px;
  --tk-display: -2.5px;
  --tk-h1:      -1.5px;
  --tk-h2:      -0.7px;
  --tk-h3:      -0.2px;
  --tk-body:     0px;
  --tk-eyebrow:  2.5px;   /* eyebrows are spaced uppercase mono */
  --tk-meta:     1.5px;

  /* =========================================================
     SPACING · 4px base
     ========================================================= */
  --s-0:    0;   /* @kind spacing */
  --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: 140px;   /* section block */
  --s-11: 200px;

  /* =========================================================
     RADII
     We prefer SHARP edges. Cards = 12px max. Pills = 999.
     No rounded-corner soft-tech look (avoid 24px+ "friendly").
     ========================================================= */
  --r-none:   0;   /* @kind radius */
  --r-xs:     2px;   /* tabular details */
  --r-sm:     4px;   /* small chips, code blocks */
  --r-md:     8px;   /* inputs, buttons (square variant) */
  --r-lg:    12px;   /* cards — DO NOT exceed for surfaces */
  --r-pill:  999px;  /* uppercase pill buttons & badges */

  /* =========================================================
     SHADOWS (low and editorial — no glow, no neumorphism)
     Orange shadow is reserved for the primary CTA.
     ========================================================= */
  --shadow-sm:     0 1px 2px rgba(6, 41, 52, 0.04), 0 1px 3px rgba(6, 41, 52, 0.03);
  --shadow-md:     0 4px 12px rgba(6, 41, 52, 0.06), 0 2px 4px rgba(6, 41, 52, 0.04);
  --shadow-lg:     0 12px 32px rgba(6, 41, 52, 0.08), 0 4px 12px rgba(6, 41, 52, 0.05);
  --shadow-orange: 0 8px 24px rgba(255, 123, 3, 0.22);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);   /* @kind other */
  --dur-1:     120ms;   /* @kind other */
  --dur-2:     250ms;   /* @kind other */
  --dur-3:     400ms;   /* @kind other */
  --dur-4:     600ms;   /* @kind other */

  /* =========================================================
     LAYOUT
     ========================================================= */
  --wrap:        1240px;
  --gutter:      40px;
  --gutter-sm:   24px;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Apply these as classes (.fy-h1) OR scope this stylesheet
   under a .fy-prose wrapper for plain HTML content blocks.
   ========================================================= */

.fy-eyebrow,
.fy-prose .eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 12px;
}
.fy-eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: currentColor;
}

.fy-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tk-display);
  color: var(--fg);
}

.fy-h1, .fy-prose h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tk-h1);
  color: var(--fg);
}
.fy-h2, .fy-prose h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.10;
  letter-spacing: var(--tk-h2);
  color: var(--fg);
}
.fy-h3, .fy-prose h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.20;
  letter-spacing: var(--tk-h3);
  color: var(--fg);
}
.fy-h4, .fy-prose h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.25;
  color: var(--fg);
}

.fy-body, .fy-prose p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  text-wrap: pretty;
}

.fy-lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.50;
  color: var(--fg-muted);
}

.fy-small, .fy-prose small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: var(--tk-meta);
  color: var(--fg-muted);
}

.fy-meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--tk-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.fy-code, .fy-prose code, .fy-prose pre {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--fy-teal-04);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  color: var(--fy-teal);
}

.fy-script {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: var(--fs-script);
  line-height: 1;
  color: var(--accent);
}

/* Selection + focus — orange, never blue */
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}