/* ==========================================================================
   unknowns — Design Tokens
   Colors, type, spacing, radii, shadows.
   Source: CharteUnknowns_short.pdf (Camping Design, 2017), updated for 2026.
   ========================================================================== */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: "Circular Std";
  src: url("./fonts/CircularStd-Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circular Std";
  src: url("./fonts/CircularStd-BookItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Circular Std";
  src: url("./fonts/CircularStd-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circular Std";
  src: url("./fonts/CircularStd-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Circular Std";
  src: url("./fonts/CircularStd-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circular Std";
  src: url("./fonts/CircularStd-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ======================================================================
     CORE PALETTE — the identity blue ('élégant bleu low-tech')
     ====================================================================== */
  --un-blue: #0000FF;          /* THE signature blue — single source of truth (use this everywhere) */
  --un-blue-ink: #0000FF;      /* alias */
  --un-blue-deep: #001FA0;     /* pressed / hover-darker */
  --un-blue-tint: #E6EAFB;     /* 8% surface tint */
  --un-blue-wash: #F2F4FD;     /* 4% surface wash */

  --un-black: #0A0A0A;         /* true paper black */
  --un-white: #FFFFFF;         /* paper */

  /* ======================================================================
     EXTENDED "PETITE GAMME" — the 33 curated colors from the charter.
     Grouped by family. Use sparingly as accents; blue always dominates.
     ====================================================================== */
  /* Blues (family of the identity) */
  --un-blue-00:   #0000FF;  /* identity */
  --un-blue-05:   #005ED2;
  --un-blue-cyan: #4BDDF6;
  --un-blue-teal: #13B1CE;
  --un-blue-aqua: #22A49A;

  /* Greens */
  --un-green-sage:  #699A6A;
  --un-green-mint:  #45796C;
  --un-green-moss:  #195949;
  --un-green-olive: #8FA504;
  --un-green-dark:  #355C0D;

  /* Yellows */
  --un-yellow-sun:    #FFE600;
  --un-yellow-sun-press:#F4CE0E;  /* pressed/hover state for yellow CTAs */
  --un-yellow-lemon:  #EBFF03;
  --un-yellow-mustard:#DDCE35;
  --un-yellow-ochre:  #CEA606;
  --un-yellow-bronze: #B6A406;

  /* Oranges / reds */
  --un-orange:      #FFA212;
  --un-orange-red:  #FE6A00;
  --un-red:         #FC0903;
  --un-red-bright:  #FF3838;
  --un-red-wine:    #CD0005;
  --un-pink-clay:   #AC7C6E;
  --un-peach:       #FEC2BA;
  --un-pink-warm:   #FF7973;

  /* Stones / neutrals from the palette */
  --un-stone-blue:    #525F6F;
  --un-stone-navy:    #224072;
  --un-stone-slate:   #4E595F;
  --un-stone-smoke:   #69969A;
  --un-stone-steel:   #648187;
  --un-stone-taupe:   #908265;
  --un-stone-sand:    #B7B398;
  --un-stone-bark:    #4B4B19;

  /* ======================================================================
     SEMANTIC TOKENS
     ====================================================================== */
  --fg-1: var(--un-black);            /* primary ink */
  --fg-2: #3A3A3A;                    /* secondary ink */
  --fg-3: #6B6B6B;                    /* tertiary / captions */
  --fg-muted: #9A9A9A;                /* placeholder */
  --fg-inverse: var(--un-white);
  --fg-accent: var(--un-blue);

  --bg-1: var(--un-white);            /* page */
  --bg-2: #FAFAFA;                    /* subtle surface */
  --bg-3: #F2F2F2;                    /* elevated / input */
  --bg-inverse: var(--un-black);
  --bg-accent: var(--un-blue);
  --bg-accent-soft: var(--un-blue-wash);

  --border-1: #E8E8E8;                /* hairline */
  --border-2: #D4D4D4;                /* input */
  --border-strong: var(--un-black);   /* emphatic outline */

  --link: var(--un-blue);
  --link-hover: var(--un-blue-deep);
  --focus-ring: var(--un-blue);
  --selection-bg: var(--un-blue);
  --selection-fg: var(--un-white);

  /* States */
  --state-hover-overlay: rgba(0, 0, 0, 0.04);
  --state-press-overlay: rgba(0, 0, 0, 0.08);
  --state-hover-blue: var(--un-blue-deep);
  --state-press-blue: #001580;

  /* ======================================================================
     SPACING — an 8-pt base scale. Occasional 4s for dense UI.
     ====================================================================== */
  --space-0:  0;
  --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;
  --space-12: 256px;

  /* ======================================================================
     RADII — geometric, mostly sharp. Circular is reserved for monogramme
     and pill-shaped CTAs (echoing the monogramme's full-round disc).
     ====================================================================== */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ======================================================================
     BUTTONS — single sizing scale so every CTA matches.
     Standard = content CTAs; compact = nav-bar CTAs.
     ====================================================================== */
  --btn-pad-y: 14px;
  --btn-pad-x: 26px;
  --btn-fs: 15px;
  --btn-pad-compact-y: 10px;
  --btn-pad-compact-x: 18px;
  --btn-fs-compact: 14px;

  /* ======================================================================
     BORDERS
     ====================================================================== */
  --stroke-hair: 1px;
  --stroke-rule: 1.5px;   /* body horizontal rules */
  --stroke-emph: 2px;     /* emphatic outline, buttons */
  --stroke-heavy: 4px;    /* display underlines */

  /* ======================================================================
     SHADOWS — used sparingly. The brand is flat and print-native.
     Prefer borders and color blocks over shadow stacks.
     ====================================================================== */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 12px 40px rgba(0, 0, 255, 0.12);  /* brand-tinted lift */
  --shadow-focus: 0 0 0 3px rgba(0, 0, 255, 0.30);

  /* ======================================================================
     MOTION — understated. The brand is calm, academic.
     ====================================================================== */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ======================================================================
     TYPOGRAPHY — Circular Std, designed by Laurenz Brunner (Lineto, 2013).
     Geometric sans-serif with warmth. Only book / medium / bold + italics
     are in rotation (per charter).
     Fallback: Arial (charter-specified substitute), then system sans.
     ====================================================================== */
  --font-sans: "Circular Std", Arial, ui-sans-serif, system-ui, sans-serif;
  --font-display: "Circular Std", Arial, ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Weights actually in rotation per charter */
  --fw-book: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Type scale — editorial, generous. Display sizes lean big. */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;
  --fs-6xl:  88px;
  --fs-7xl:  128px;
  --fs-8xl:  180px;

  --lh-tight: 1.02;
  --lh-snug:  1.12;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:     0.04em;
  --tracking-caps:     0.12em;

  /* Measure */
  --measure-narrow: 42ch;
  --measure: 62ch;
  --measure-wide: 78ch;
}

/* ==========================================================================
   Element defaults — drop this stylesheet into any page for on-brand type.
   ========================================================================== */
html {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-book);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--fg-1);
  margin: 0;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0 0 var(--space-4) 0;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-6xl); font-weight: var(--fw-book); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-4xl); font-weight: var(--fw-book); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-2xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
h5 { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
h6 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

p {
  margin: 0 0 var(--space-4) 0;
  max-width: var(--measure);
  line-height: var(--lh-base);
  text-wrap: pretty;
}

.lead, p.lead {
  font-size: var(--fs-xl);
  line-height: 1.4;
  color: var(--fg-2);
  font-weight: var(--fw-book);
}

small, .caption {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  line-height: var(--lh-base);
}

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

/* Visible keyboard focus — applies site-wide; uses the brand focus ring token.
   Mouse clicks don't trigger :focus-visible, so this only shows for keyboard/AT users. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code { background: var(--bg-3); padding: 2px 6px; border-radius: var(--radius-2); }
pre  { background: var(--bg-3); padding: var(--space-4); border-radius: var(--radius-3); overflow-x: auto; }

hr {
  border: none;
  border-top: var(--stroke-rule) solid var(--border-strong);
  margin: var(--space-6) 0;
}

blockquote {
  margin: var(--space-5) 0;
  padding-left: var(--space-5);
  border-left: var(--stroke-emph) solid var(--un-blue);
  font-size: var(--fs-xl);
  line-height: 1.4;
  font-style: italic;
  color: var(--fg-1);
}

/* Utility classes used by preview cards */
.un-display  { font-family: var(--font-display); font-weight: var(--fw-book); letter-spacing: -0.025em; line-height: var(--lh-tight); }
.un-italic   { font-style: italic; }
.un-medium   { font-weight: var(--fw-medium); }
.un-bold     { font-weight: var(--fw-bold); }
.un-mono     { font-family: var(--font-mono); }
.un-ink      { color: var(--un-blue); }