/* Tokens: the only raw values (docs/tokens.md). */

@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2"); font-weight: 500 900; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* Metric-matched fallbacks */
@font-face { font-family: "Source Serif Fallback"; src: local("Georgia"); font-weight: 400 500; size-adjust: 91.6%; ascent-override: 113.1%; descent-override: 36.6%; line-gap-override: 0%; }
@font-face { font-family: "Source Serif Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 600 700; size-adjust: 91.6%; ascent-override: 113.1%; descent-override: 36.6%; line-gap-override: 0%; }
/* the same at the phone list's text size */
@font-face { font-family: "Source Serif Text Fallback"; src: local("Georgia"); font-weight: 400 500; size-adjust: 103.9%; ascent-override: 99.7%; descent-override: 32.3%; line-gap-override: 0%; }
@font-face { font-family: "Source Serif Text Fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 600 700; size-adjust: 103.9%; ascent-override: 99.7%; descent-override: 32.3%; line-gap-override: 0%; }
@font-face { font-family: "Schibsted Fallback"; src: local("Arial"); font-weight: 500; size-adjust: 105.0%; ascent-override: 93.3%; descent-override: 24.8%; line-gap-override: 0%; }
@font-face { font-family: "Schibsted Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 900; size-adjust: 104.4%; ascent-override: 93.9%; descent-override: 24.9%; line-gap-override: 0%; }
@font-face { font-family: "Caveat Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold"), local("Arial"), local("Roboto"); font-weight: 600; size-adjust: 72.1%; ascent-override: 133.1%; descent-override: 41.6%; line-gap-override: 0%; }

:root {
  --paper: #fbf6ed;
  --ink: #182c53;
  --pen-blue: #2857e5;
  --pen-red: #b73224;
  --pen-green: #2a7b42;
  --faded: color-mix(in oklab, var(--ink) 76%, var(--paper));
  --rule: color-mix(in oklab, var(--ink) 24%, var(--paper));
  --hairline-color: color-mix(in oklab, var(--ink) 24%, transparent);
  --sheet-edge: color-mix(in oklab, var(--ink) 7%, transparent);
  --pen: var(--pen-blue);
  --pen-none: color-mix(in oklab, var(--pen) 0%, transparent);
  --scrim: color-mix(in oklab, var(--ink) 24%, transparent);
  --brand-pepsico-green: #5e910d;
  --brand-pepsico-blue: #71a8e3;
  --brand-pepsico-lime: #8ebc29;
  --brand-pepsico-orange: #eb9f0a;
  --brand-hivery: #4f4cf4;
  --brand-harmonya-steel: #969595;
  --brand-harmonya-silver: #d3d3d3;
  --brand-harmonya-pearl: #d6d5d4;
  --brand-harmonya-ash: #cacac9;
  --brand-harmonya-green: #89c667;
  --brand-harmonya-teal: #2cc0d5;
  --brand-harmonya-pale: #dbe8a6;
  --brand-harmonya-lime: #a7d16b;
  --brand-harmonya-pink: #f593a3;
  --brand-harmonya-yellow: #ffc81a;

  /* Type */
  --font-print: "Source Serif 4", "Source Serif Fallback", Georgia, serif;
  --font-print-text: "Source Serif 4", "Source Serif Text Fallback", Georgia, serif;
  --font-voice: "Schibsted Grotesk", "Schibsted Fallback", Arial, sans-serif;
  --font-pen: Caveat, "Caveat Fallback", cursive;
  --weight-voice: 500;
  --weight-voice-strong: 600;
  --weight-name: 800;
  --weight-print: 500;
  --weight-print-strong: 700;
  --weight-pen: 600;

  /* One scale on 1.25. */
  --ratio: 1.25;
  --text-body: 1rem;
  --floor-caption: 0.875rem;  /* dense UI text at least 14px at the default root */
  --text-caption: max(calc(var(--text-body) / var(--ratio)), var(--floor-caption));
  --text-title: calc(var(--text-body) * var(--ratio));
  --text-lead: calc(var(--text-title) * var(--ratio));  /* step 2: the headline on phones */
  --text-display: calc(var(--text-lead) * var(--ratio));
  --text-name: calc(var(--text-display) * var(--ratio) * var(--ratio) * var(--ratio));
  --text-name-narrow: calc(var(--text-name) / var(--ratio));

  --match-voice: 1.457;
  --match-title: 1.310;
  --match-display: 1.288;
  --pen-caption: calc(var(--text-caption) * var(--match-voice));
  --pen-small: calc(var(--text-caption) / var(--ratio) * var(--match-voice));  /* roles beside the rows under 22.5rem */
  --pen-text: calc(var(--text-body) * var(--match-voice));
  --pen-mark: calc(var(--text-title) * var(--match-title));
  --pen-display: calc(var(--text-display) * var(--match-display));

  --leading-text: 1.5;
  --leading-display: 1.1;
  --leading-name: 1;
  --track-title: -0.01em;
  --track-display: -0.03em;
  --track-headline: -0.02em;
  --track-name: -0.03em;
  --track-name-tight: -0.045em; 
  --measure: 30em;
  /* The BG mark drawn live beside the name (the same drawing as logos/mark.html). Lengths are shares of the mark's size. */
  --mark-size: var(--text-name);                 /* the mark is as tall as the name's letters */
  /* offsets are in each letter's own em (the letter's size is a share of the mark) */
  --mark-b: 0.46em;  --mark-b-x: 0.37em;  --mark-b-y: 0.63em;    /* the B centered in the box */
  --mark-g: 0.74em;  --mark-g-x: 0.838em; --mark-g-y: 0.189em; --mark-g-tilt: -4deg; /* the G fully outside it */
  --mark-width: calc(var(--mark-size) * 1.16);   /* the box plus the G standing outside it */
  --mark-line: 3;
  --mark-phone: 3.5rem;        /* the BG mark on phones, beside the nickname line */                                /* the box line, in the mark's 64 unit grid */
  --z-raised: 1;               /* a strip that content scrolls under (the sheet's controls strip) */
  --z-over: 2;
  --dot-round: 46%;            /* the corner of the i's dot in Schibsted Grotesk 800 */
  --quote-max: 90%;            /* two-sided sizes: a quote's line never runs the full column, so a late font cannot change its line count */
                 /* controls that sit on that strip */
  --plus-rise: 0.14em;         /* lifts the pen plus to the middle of the lowercase letters beside it */
  --half: 50%;                 /* the middle of a box (a control centered on its sheet) */
  --check-w: 0.95em; --check-h: 0.85em;  /* the check beside a year, on phones */
  --check-room: 1.4em;  /* the pen check after a past title, and its gap */
  --title-max: 44%;  /* desktop: the widest a title column may grow; a longer title wraps */
  --phone-roles: 44%;
  --phone-roles-mid: 47%;      /* 360 to 389 wide: the box keeps the room its titles need */
  --phone-roles-narrow: 30%;   /* under 22.5rem, with the smaller pen */          /* phones: the roles' share of the list; the box takes the rest */
  --chev: 0.75em;              /* the chevrons: sheet steps and rows */
  --phone-column: 36rem;       /* the one-column reading width */
  /* one column: narrow or short; page.js reads it, the CSS repeats it */
  --one-column: (max-width: 47.99rem), (max-height: 31.24rem);
  --plus: 0.69em;              /* the pen's plus and its space, measured in Caveat 600 */

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --step-out: var(--space-6);
  --step-in: var(--space-3);

  --tile: var(--space-6);
  --icon: var(--text-body);
  --icon-text: 0.94em;
  --icon-text-box: round(nearest, var(--icon-text), 1px);
  --cap: 0.703em;
  --tile-large: round(nearest, calc(var(--tile) * 2), 1px);
  --match-cap: 0.667;
  --tile-row: round(nearest, min(max(var(--tile), calc(var(--text-title) * var(--match-cap) + var(--step-in))), calc(var(--pen-text) * var(--leading-display) - var(--space-1))), 1px);
  --under-name: calc(var(--text-name) * var(--leading-name));
  --line: 1lh;
  --fill: 100%;
  --sheet-away: translateY(100%);
  --mark-inset: var(--space-1);
  --radius: var(--space-1);
  --radius-large: calc(var(--radius) * 2);
  --radius-sheet: calc(var(--radius) * 3);
  --hit: 44px;                
  --hit-pointer: 24px;         /* the desktop pointer floor (conflicts.md row 9) */
  --stroke-pen: calc(var(--pen-mark) * 0.083);
  --stroke-print: calc(var(--text-body) * 0.102);
  --stroke-mark: clamp(1px, calc(var(--stroke-print) * 0.7), 2px);
  --harmonya-stroke-share: 0.025;
  --ring: 2px;
  --ring-gap: 2px;
  --hairline: 1px;
  --scrim-blur: 4px;

  --page-cols: 64;
  --page-rows: 40;
  --root-ceiling: 225%;
  --page-width: calc(var(--page-cols) * 1rem);
  --page-height: calc(var(--page-rows) * 1rem);
  --screen-width: 100vw;
  --screen: 100vh;

  /* Motion (conflicts.md rows 1, 2, 4, 6, 7, 18). */
  --dur-micro: 120ms;
  --dur-press: 150ms;
  --dur-ui: 180ms;
  --dur-exit: 135ms;           /* three quarters of --dur-ui; written out so the script can read it */
  --dur-panel: 260ms;
  --dur-page: 300ms;
  --dur-sheet-exit: 225ms;     /* three quarters of --dur-page; written out so the script can read it */
  --dur-show: 400ms;
  --dur-copied: 1500ms;
  --dur-fonts: 600ms;          /* the longest the first visit waits for fonts */
  --dur-failsafe: 2500ms;      /* after this the first visit shows everything */
  --stagger: 30ms;
  --dur-type: var(--stagger);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-hover: ease;
  --ease-exit: linear;
  --press-scale: 0.96;
  --flick: 0.1;                /* px per ms: a release faster than this dismisses a sheet */
}

@supports (color: oklch(0 0 0)) {
  :root {
    --paper: oklch(0.975 0.013 86);
    --ink: oklch(0.3 0.075 262);
    --pen-blue: oklch(0.52 0.22 265);
    --pen-red: oklch(0.52 0.172 30);
    --pen-green: oklch(0.52 0.118 150);
    --brand-pepsico-green: oklch(0.598 0.158 130.4);
    --brand-pepsico-blue: oklch(0.717 0.104 251.1);
    --brand-pepsico-lime: oklch(0.736 0.174 126.2);
    --brand-pepsico-orange: oklch(0.759 0.159 74.4);
    --brand-hivery: oklch(0.533 0.242 275.2);
    --brand-harmonya-steel: oklch(0.671 0.001 17.2);
    --brand-harmonya-silver: oklch(0.867 0 89.9);
    --brand-harmonya-pearl: oklch(0.874 0.002 67.8);
    --brand-harmonya-ash: oklch(0.839 0.001 106.4);
    --brand-harmonya-green: oklch(0.763 0.142 135.4);
    --brand-harmonya-teal: oklch(0.743 0.12 209.6);
    --brand-harmonya-pale: oklch(0.905 0.087 117.2);
    --brand-harmonya-lime: oklch(0.808 0.138 127.6);
    --brand-harmonya-pink: oklch(0.769 0.119 9.7);
    --brand-harmonya-yellow: oklch(0.858 0.171 87.9);
  }
  @media (color-gamut: p3) {
    :root {
      --pen-blue: oklch(0.52 0.235 265);
      --pen-red: oklch(0.52 0.192 30);
      --pen-green: oklch(0.52 0.164 150);
    }
  }
}
:root[data-pen="red"] { --pen: var(--pen-red); }
:root[data-pen="green"] { --pen: var(--pen-green); }

@media (min-resolution: 2dppx) { :root { --hairline: 0.5px; } }
@supports (height: 100dvh) { :root { --screen: 100dvh; } }

/* The reader's size is the floor; above it the root follows the window. */
html {
  font-size: max(100%, min(100vw / var(--page-cols), 100vh / var(--page-rows), var(--root-ceiling)));
  font-size: max(100%, min(100vw / var(--page-cols), 100dvh / var(--page-rows), var(--root-ceiling)));
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-micro: 0ms; --dur-press: 0ms; --dur-ui: 0ms; --dur-panel: 0ms; --dur-page: 0ms; --dur-exit: 0ms; --dur-sheet-exit: 0ms; --dur-show: 0ms; --stagger: 0ms; --dur-type: 0ms; --press-scale: 1; }
}