/* The arched edge's numbers (components.css, .edge-arch) are registered lengths, so a script reads them
   in px: parseFloat(getComputedStyle(el).getPropertyValue('--edge-arch-h')). */
@property --edge-arch-h {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --edge-rim-offset {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --edge-h {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

/* SyphonGo design tokens (owner: W1, design system).
 *
 * Every colour below was sampled from design/approved-homepage.png and then nudged where needed so that
 * text keeps at least 4.5:1 contrast on the parchment (#fcf4e0). Use these variables in every page's CSS
 * instead of raw values, so the site stays one look.
 */
:root {
  color-scheme: light;

  /* Royal blue: titles, headings, links. */
  --c-royal: #0f27a8;
  --c-royal-hover: #0a1b82;
  --c-royal-soft: #3a52c2;
  --c-navy: #1b2754;            /* nav and footer links */

  /* Text browns. */
  --c-ink: #2c2118;             /* body text */
  --c-ink-soft: #4e4034;        /* secondary text, descriptions */
  --c-ink-muted: #665442;       /* notes, captions, the iOS line (5.9:1 on parchment) */
  --c-gold-brown: #85561a;      /* eyebrows and small gold text (5.0:1 on parchment) */
  --c-gold-text: #9a6218;       /* gold text at 24px and up only (4.1:1) */

  /* Gold trim, ornaments and lines. */
  --c-gold: #cf9536;            /* ornaments, step badges, sparkles */
  --c-gold-bright: #f3c65a;
  --c-gold-light: #f7dc91;
  --c-gold-pale: #f2e2b8;
  --c-gold-line: #d6aa5a;       /* hairlines and rules */
  --c-gold-deep: #9b6a1e;       /* dark edge of the trim */
  --gold-trim: linear-gradient(180deg, #fbe39a 0%, #e7b44e 38%, #b97c22 62%, #e9bd5c 100%);
  --gold-rule: linear-gradient(90deg, rgb(214 170 90 / 0), #d6aa5a 18%, #e9c477 50%, #d6aa5a 82%, rgb(214 170 90 / 0));

  /* Parchment. */
  --c-parchment: #fcf4e0;       /* the page */
  --c-parchment-hi: #fffaf0;    /* panel centres, highlights */
  --c-parchment-lo: #f7ead0;    /* footer, wells */
  --c-parchment-edge: #ecd6aa;  /* soft borders on parchment */
  --c-on-parchment-line: rgb(155 106 30 / 0.22); /* separators inside panels */

  /* Glossy green call to action. */
  --c-green-hi: #5fd25c;
  --c-green: #229430;
  --c-green-mid: #14842b;
  --c-green-lo: #05631d;
  --c-green-edge: #0a4a12;
  --c-on-green: #fffcf0;
  --c-green-text-shadow: #144614;

  /* Release-note tags (the changelog): text, background and the round icon. */
  --c-tag-added: #1f4fc4;
  --c-tag-added-bg: #dfe9fd;
  --c-tag-added-icon: #2c74f4;
  --c-tag-improved: #276b27;
  --c-tag-improved-bg: #ddf3cd;
  --c-tag-improved-icon: #3ca84c;
  --c-tag-fixed: #b13127;
  --c-tag-fixed-bg: #fcdfd4;
  --c-tag-fixed-icon: #e05050;

  /* Focus ring: royal blue on a light halo, visible on parchment, art and green. */
  --focus-ring: 0 0 0 3px #fffaf0, 0 0 0 6px #0f27a8;
  --focus-outline: 3px solid #0f27a8;

  /* Fonts. Literata (OFL), self-hosted in /assets/fonts; one variable file covers every weight and
     optical size, so headings get the display cut and body text the text cut automatically. */
  --font-serif: "Literata", "Literata Fallback", Georgia, "Times New Roman", serif;
  --font-heading: var(--font-serif);
  --font-body: var(--font-serif);

  /* Type scale: fluid between a 390 px phone and a 1440 px desktop. */
  --fs-display: clamp(2.75rem, 1.9rem + 3.45vw, 5rem);    /* "Your world. Anywhere." 44 -> 80 */
  --fs-h1: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);         /* page titles 36 -> 56 */
  --fs-h2: clamp(1.875rem, 1.55rem + 1.35vw, 2.75rem);    /* section titles 30 -> 44 */
  --fs-h3: clamp(1.3rem, 1.2rem + 0.45vw, 1.625rem);      /* card and step titles 21 -> 26 */
  --fs-h4: 1.1875rem;
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.4375rem);    /* 18 -> 23 */
  --fs-body: 1.0625rem;                                   /* 17 */
  --fs-small: 0.9375rem;                                  /* 15 */
  --fs-xs: 0.8125rem;                                     /* 13 */
  --fs-eyebrow: clamp(0.8125rem, 0.75rem + 0.25vw, 1rem);
  --lh-tight: 1.06;
  --lh-heading: 1.18;
  --lh-snug: 1.4;
  --lh-body: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --tracking-eyebrow: 0.14em;

  /* Spacing. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --gutter: clamp(1rem, 3.5vw, 2.5rem);                   /* page side margin: 16 -> 40 */
  --section-space: clamp(2.5rem, 1.5rem + 4vw, 5rem);     /* vertical rhythm between sections */

  /* Widths. */
  --container-max: 80rem;       /* 1280: the main content */
  --container-wide: 86rem;      /* 1376: full-width panels */
  --container-narrow: 48rem;    /* 768: reading pages */
  --measure: 68ch;              /* longest comfortable line */

  /* Radii. */
  --radius-xs: 4px;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-pill: 999px;

  /* Shadows (warm, never grey). */
  --shadow-soft: 0 2px 8px rgb(90 60 20 / 0.12);
  --shadow-panel: 0 14px 34px -10px rgb(90 60 20 / 0.32);
  --shadow-lift: 0 20px 44px -14px rgb(70 45 10 / 0.4);
  --text-glow: 0 0 1px rgb(255 252 242 / 0.8), 0 0 14px rgb(255 250 236 / 0.95);

  /* Header: it floats over the top of the page art. --header-h is everything it covers, from the top
     of the page to the bar's bottom edge: pad the first section of a page by it. */
  --header-offset: clamp(0.625rem, 1.4vw, 1.25rem);
  --header-bar-h: 4.75rem;
  --header-h: calc(var(--header-offset) + var(--header-bar-h));
  --header-max: 79rem;          /* 1264: the mock-up's bar is 88% of a 1440 screen */

  /* Parchment panel: /assets/img/panel.png is 400x360, sliced 96 px from every edge, and its outer
     22 px are transparent (the shadow and the corner flourishes). --panel-scale sets how big the frame
     is drawn: at 0.5 the corners are 48 px and the gold frame 4 px. */
  --panel-img: url("/assets/img/panel.png");

  /* The arched parchment edge (components.css, .edge-arch): how far the arch dips from its middle to
     its ends (16 px on a phone, about 50 at 1440, 68 from 1920), where its rim's highest point sits
     below the edge's top, and the edge's height (rim offset + dip + as much again below the ends). */
  --edge-arch-h: clamp(0.875rem, 0.2rem + 3.3vw, 4.25rem);
  --edge-rim-offset: calc(var(--edge-arch-h) * 0.25);
  --edge-h: calc(var(--edge-arch-h) * 1.5);

  /* Motion. */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  /* Stacking. */
  --z-header: 50;
  --z-menu: 60;
  --z-skip: 100;
}

@media (max-width: 900px) {
  :root {
    --header-bar-h: 4rem;
  }
}