/* =========================================================================
   FENNEC — Foundations
   Color + Typography tokens for Agence FENNEC.
   Brand: Samuel Jullien EI — Villeneuve-lès-Avignon.
   Palette: noir profond + jaune saffron + blanc cassé.
   Use semantic vars (--fg-1, --bg-1, --h1, --p) in components.
   ========================================================================= */

/* Brand fonts — uploaded by client */
@font-face {
  font-family: "Josephin";
  src: url("fonts/Josephin.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Candara";
  src: url("fonts/Candara.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Mono kept from Google Fonts — no client-supplied mono yet */
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap");

:root {
  /* ============================================================
     COLOR SCALE — raw values
     Sampled from the official FeNNec logo (#F8D134 / #050505).
     ============================================================ */

  /* Noir — anchor of the brand. The logo lives on near-black. */
  --noir-1000: #050505;   /* the brand black, exact logo bg */
  --noir-900:  #0E0D0C;   /* default page when "dark" */
  --noir-800:  #18171A;   /* card on noir */
  --noir-700:  #26242A;   /* borders on noir */
  --noir-600:  #3A3740;   /* secondary text on noir surfaces (rare) */
  --noir-500:  #6E6A75;   /* muted on noir */
  --noir-400:  #9F9BA8;
  --noir-300:  #C9C5D1;
  --noir-200:  #E1DEE6;
  --noir-100:  #EFEDF1;

  /* Saffron — THE accent. Logo yellow, used with restraint. */
  --saffron-700: #C99800;
  --saffron-600: #E6B81F;
  --saffron-500: #F8D134;   /* exact logo yellow */
  --saffron-400: #FBDD60;
  --saffron-300: #FCE89A;
  --saffron-200: #FDF1C2;
  --saffron-100: #FEF8E0;

  /* Blanc — the "paper" alternative to noir. Slightly warm so it pairs with saffron. */
  --blanc-50:  #FAFAF7;   /* primary light page bg */
  --blanc-100: #F4F3EE;   /* alt section */
  --blanc-200: #ECEAE3;   /* card on blanc */
  --blanc-300: #DAD7CD;   /* hairline on blanc */

  /* Status — kept restrained, tuned to warm palette */
  --success: #2E7D4F;
  --warning: #C99800;     /* same as saffron-700 */
  --danger:  #B33024;

  /* ============================================================
     SEMANTIC COLORS
     ============================================================ */

  /* Surfaces — DARK is the primary brand mode (logo lives in noir) */
  --bg-1: var(--noir-1000);     /* page, dark mode */
  --bg-2: var(--noir-900);      /* alt section on dark */
  --bg-3: var(--noir-800);      /* card on dark */
  --bg-light-1: var(--blanc-50);   /* light page */
  --bg-light-2: var(--blanc-100);  /* light alt section */
  --bg-light-3: #FFFFFF;          /* clean card on light */

  /* Foreground (when on dark bg) */
  --fg-1: var(--blanc-50);     /* primary text on noir */
  --fg-2: var(--noir-300);     /* secondary on noir */
  --fg-3: var(--noir-400);     /* muted on noir */
  --fg-4: var(--noir-500);     /* caption on noir */

  /* Foreground (when on light bg) */
  --fg-on-light-1: var(--noir-1000);
  --fg-on-light-2: var(--noir-700);
  --fg-on-light-3: var(--noir-500);

  /* Borders */
  --border-on-dark-1: var(--noir-700);
  --border-on-dark-2: var(--noir-600);
  --border-on-light-1: var(--blanc-300);
  --border-on-light-2: var(--noir-200);

  /* Accent — used as highlight, link, key word color */
  --accent: var(--saffron-500);
  --accent-strong: var(--saffron-600);
  --accent-soft: var(--saffron-200);
  --on-accent: var(--noir-1000);  /* black on saffron — the brand pairing */

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(248, 209, 52, 0.45);

  /* ============================================================
     TYPOGRAPHY
     The logomark is sharp, geometric, condensed — built from heavy
     uppercase strokes. Text type takes that cue:
       - Display : Archivo Black / Archivo 900 — sharp, geometric grotesk
       - Body    : Archivo (regular/medium) — pairs cleanly
       - Mono    : DM Mono for technical metadata
     No serif. No script. The brand reads as bold, direct, "terrain".
     ============================================================ */
  --font-display: "Josephin", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-display-narrow: "Josephin", "Archivo", sans-serif;
  --font-sans:    "Candara", "Optima", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "DM Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Type scale — bold + contrasted for marketing surfaces */
  --fs-mega:       clamp(72px, 11vw, 180px);  /* hero headlines */
  --fs-display-l:  clamp(56px, 7vw, 120px);
  --fs-display-m:  clamp(44px, 5vw, 80px);
  --fs-h1:         clamp(40px, 4vw, 64px);
  --fs-h2:         clamp(28px, 2.6vw, 44px);
  --fs-h3:         28px;
  --fs-h4:         20px;
  --fs-eyebrow:    12px;
  --fs-lead:       21px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-caption:    12px;

  /* Line heights */
  --lh-mega:    0.88;
  --lh-display: 0.94;
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  /* Letterspacing */
  --ls-mega:    -0.035em;   /* very tight on huge display */
  --ls-display: -0.025em;
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-eyebrow: 0.22em;     /* generous track for caps eyebrow */
  --ls-button:  0.05em;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --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;

  /* Container widths */
  --container-narrow: 720px;
  --container:        1240px;
  --container-wide:   1480px;

  /* ============================================================
     RADII — almost zero. Brand is geometric and sharp.
     ============================================================ */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;       /* used sparingly, e.g. avatar masks */
  --radius-pill: 999px;  /* tags / badges only */

  /* ============================================================
     SHADOWS — restrained. Brand favors flat geometric forms.
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 24px 60px rgba(0, 0, 0, 0.5);
  /* On light surfaces */
  --shadow-light-1: 0 1px 2px rgba(20, 17, 15, 0.06);
  --shadow-light-2: 0 6px 18px rgba(20, 17, 15, 0.08);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 480ms;
}

/* ===========================================================================
   SEMANTIC TYPE STYLES
   =========================================================================== */

.eyebrow,
[data-fennec="eyebrow"] {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow--muted {
  color: var(--fg-3);
}

.mega,
h1.mega {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  font-weight: 800;
  line-height: var(--lh-mega);
  letter-spacing: var(--ls-mega);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

.display-l {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.display-m {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

.lead, p.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

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

.small, p.small {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 400;
  letter-spacing: 0;
}

/* Saffron highlight — single word color treatment */
.accent { color: var(--accent); }
.accent-bg { background: var(--accent); color: var(--on-accent); }

/* Page reset for FENNEC pages — DARK by default */
.fennec-page {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fennec-page--light {
  background: var(--bg-light-1);
  color: var(--fg-on-light-1);
}

.fennec-page--light h1,
.fennec-page--light h2,
.fennec-page--light h3,
.fennec-page--light h4,
.fennec-page--light p {
  color: var(--fg-on-light-1);
}
.fennec-page--light .lead { color: var(--fg-on-light-2); }
.fennec-page--light .small { color: var(--fg-on-light-3); }