/* Hallmark · tokens for the Aasani site · theme: custom "Forest poster" (hex is the source of truth)
 * Every colour, font, size, space, rule, radius, easing and duration the site uses lives here. Site CSS references these by name only.
 */

/* Archivo, self-hosted (SIL Open Font License, see /assets/fonts/OFL.txt). Variable: weight 100-900, width 62-125.
   The file is the latin subset, unmodified. No third-party font host is used. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

/* Metric-matched fallbacks so the swap to Archivo does not shift the page.
   Measured against Archivo (unitsPerEm 1000, ascent 878, descent 210). */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 100%;
  ascent-override: 87.8%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Wide Fallback";
  src: local("Arial Black"), local("Arial-Black");
  size-adjust: 104%;
  ascent-override: 84.4%;
  descent-override: 20.2%;
  line-gap-override: 0%;
}

:root {
  /* Colour · the seven brand colours, exact. OKLCH for reference only. */
  --color-forest: #0B6B4B; /* oklch(46.9% 0.097 164) the ground */
  --color-paper:  #FAF7F2; /* oklch(97.7% 0.007 81)  light panels */
  --color-ink:    #141414; /* oklch(19.1% 0 0)       text on light */
  --color-mint:   #BFE8D0; /* oklch(89.5% 0.054 159) drawing fills, soft tags */
  --color-band:   #D9F2C2; /* oklch(93.1% 0.069 130) the closing band only */
  --color-deep:   #0B2A1E; /* oklch(25.8% 0.043 165) text on band */
  --color-white:  #FFFFFF; /* text on forest */

  /* Colour · roles. Only the approved text pairs are wired up:
     white/forest 6.5 · ink/paper 17.2 · forest/paper 6.1 · deep/band 12.8 · ink/mint 13.7 · band/forest 5.4 */
  --color-ground:         var(--color-forest);
  --color-on-ground:      var(--color-white);
  --color-on-ground-soft: var(--color-band);
  --color-surface:        var(--color-paper);
  --color-on-surface:     var(--color-ink);
  --color-mark:           var(--color-forest);
  --color-fill:           var(--color-mint);
  --color-on-fill:        var(--color-ink);
  --color-close:          var(--color-band);
  --color-on-close:       var(--color-deep);
  --color-rule-on-ground: var(--color-mint);
  --color-rule-on-surface: var(--color-forest);

  /* Focus · 2px white ring with a dark offset shadow on forest; 2px forest ring on paper and band. */
  --color-focus-on-ground:  var(--color-white);
  --color-focus-halo:       var(--color-deep);
  --color-focus-on-surface: var(--color-forest);

  /* Type · one family, two registers. Width and weight carry the hierarchy. */
  --font-display: "Archivo", "Archivo Wide Fallback", "Archivo Fallback", Arial, sans-serif;
  --font-body:    "Archivo", "Archivo Fallback", Arial, sans-serif;
  --font-width-display: 112%;
  --font-width-heading: 108%;
  --font-width-body:    100%;
  --font-weight-display: 900;
  --font-weight-heading: 800;
  --font-weight-strong:  700;
  --font-weight-body:    500;

  --text-sm:      0.875rem;                               /* 14px, the floor */
  --text-ui:      1rem;                                   /* 16px, buttons and header */
  --text-base:    1.125rem;                               /* 18px, body */
  --text-lg:      clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18 to 22px, ledes */
  --text-xl:      clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem); /* 22 to 30px, step and ledger heads */
  /* The headline is always the largest text on the page: at least 1.6 times the body size (so it
     grows with a large text setting), and every other display size is held below it. */
  --text-display: max(calc(var(--text-base) * 1.6), clamp(min(2rem, 10vw), 5.4vw, 5.25rem)); /* 32 to 84px at normal size */
  --text-3xl:     min(clamp(2.125rem, 1.2rem + 3.9vw, 4.5rem), calc(var(--text-display) * 0.9));  /* section heads, below the headline */
  --text-2xl:     min(clamp(1.75rem, 1.2rem + 2.2vw, 3rem), calc(var(--text-display) * 0.75));   /* service heads */
  --text-numeral: min(clamp(3.5rem, 2.5rem + 4vw, 6rem), calc(var(--text-display) * 0.9));      /* step numbers only, below the headline */
  --text-log:     var(--text-ui); /* the sign-off log line; capped on phones below */
  --text-wordmark: clamp(1.5rem, 1.25rem + 1vw, 1.75rem); /* 24 to 28px; a page headline is never smaller */

  --leading-tight: 1.02;
  --leading-snug:  1.15;
  --leading-body:  1.55;
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --measure: 62ch;

  /* Space · 4pt scale, named by role */
  --space-3xs: 0.125rem; /*   2px */
  --space-2xs: 0.25rem;  /*   4px */
  --space-xs:  0.5rem;   /*   8px */
  --space-sm:  0.75rem;  /*  12px */
  --space-md:  1rem;     /*  16px */
  --space-lg:  1.5rem;   /*  24px */
  --space-xl:  2.5rem;   /*  40px */
  --space-2xl: 4rem;     /*  64px */
  --space-3xl: 6rem;     /*  96px */
  --space-4xl: 9rem;     /* 144px */
  --space-gutter:  clamp(var(--fixed-md), 4vw, 3rem); /* 16px on a phone, 48px wide; stays 16px with large text */
  --space-section: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --space-page-max: 80rem;                        /* 1280px column */
  --space-tap: 2.75rem;                           /* 44px, smallest tap target */

  /* Fixed sizes · padding and icons on phones that must not grow with a large text setting,
     so labels keep the room to wrap instead of running off the screen. Same as the scale at normal size. */
  --fixed-xs:      8px;
  --fixed-sm:      12px;
  --fixed-md:      16px;
  --fixed-lg:      24px;
  --fixed-icon-sm: 18px;
  --fixed-icon:    20px;
  --fixed-icon-lg: 28px;
  --fixed-tick:    30px;
  --fixed-mark:    56px;

  --space-sep: 1.25em; /* room for a drawn separator (·) between items on one line */

  /* Rules */
  --rule-hair:    1px;
  --rule-thin:    2px;
  --rule-drawing: 3px;
  --rule-strip:   4px;
  --underline-offset: 0.12em;

  /* Radius */
  --radius-drawing: 10px;
  --radius-tile:    16px;
  --radius-card:    22px;
  --radius-panel:   28px;
  --radius-pill:    999px;

  /* Motion · three easings, three durations */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  520ms;

  /* Layers */
  --z-base: 1;
  --z-menu: 100;
  --z-skip: 200; /* the skip link paints above the header and the open menu */
}

/* Phones: with a large text setting the display sizes stop growing past a share of the screen
   width, so a whole word still fits its line. No heading falls below body copy: section heads are
   capped at 22vw, which is more than body copy at 300%, and the smaller heads never go below the
   body size. At normal size these caps are far above the values in use and change nothing. */
@media (max-width: 30rem) {
  :root {
    --text-3xl: min(clamp(2.125rem, 1.2rem + 3.9vw, 4.5rem), calc(var(--text-display) * 0.9), 22vw);
    --text-2xl: max(var(--text-base), min(clamp(1.75rem, 1.2rem + 2.2vw, 3rem), calc(var(--text-display) * 0.75), 12vw));
    --text-xl:  max(var(--text-base), min(clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem), 13vw));
    --text-log: min(var(--text-ui), 9vw);
  }
}