/* css/tokens.css */
/* Design tokens. "Warm precision": the cookbook's warmth, the kitchen scale's
   exactness. Components use these properties only, never raw values. */
@layer tokens {
  @font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-italic.woff2") format("woff2");
    font-weight: 400 600;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "Inter";
    src: url("../fonts/inter.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
  }
  /* Metric compatible fallbacks, so the swap does not shift layout. */
  @font-face {
    font-family: "Fraunces Fallback";
    src: local("Times New Roman"), local("Liberation Serif"), local("Tinos");
    size-adjust: 123.37%;
    ascent-override: 79.28%;
    descent-override: 20.67%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("Liberation Sans"), local("Arimo"), local("Helvetica");
    size-adjust: 108.15%;
    ascent-override: 89.57%;
    descent-override: 22.3%;
    line-gap-override: 0%;
  }

  :root {
    color-scheme: light;

    /* Kitchen palette, light */
    --flour: #FAF6EF;        /* page background */
    --parchment: #F2EBDF;    /* secondary surfaces */
    --crust: #E4D6C1;        /* borders, dividers */
    --card: #FFFFFF;         /* cards, sheets */
    --ink: #1E1A16;          /* primary text */
    --smoke: #6B6158;        /* secondary text */
    --ash: #786D62;          /* tertiary text, AA on flour (4.68) and card; never on parchment, use smoke there */
    --accent: #1E1E1E;       /* actions: one near black accent, color is for meaning */
    --on-accent: #FAF6EF;
    --accent-hover: #3A3632;

    --basil: #2F6B45;        /* verified, success */
    --basil-tint: #E8F0EA;
    --basil-line: #C3D8C9;
    --saffron: #8A5A0B;      /* claimed labels, warnings */
    --saffron-fill: #F0B93F;
    --saffron-tint: #F8EFDC;
    --saffron-line: #E8D3A6;
    --beet: #A61E3A;         /* danger, conflict */
    --beet-tint: #F7E7EA;
    --beet-line: #E6BCC5;
    --beet-soft: #D8B3BB;
    --blueberry: #34558B;    /* info */
    --blueberry-tint: #EEF1F6;
    --blueberry-line: #C9D3E4;

    --overlay: rgb(30 26 22 / .45);
    --shade: 30 26 22;       /* shadow tint channels (ink, never pure black) */
    --photo-inset: none;

    /* Type */
    --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
    --font-ui: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --text-hero: clamp(2.5rem, 1.6rem + 3.9vw, 4.5rem);     /* 40 -> 72 */
    --text-h1: clamp(2rem, 1.55rem + 1.9vw, 3.25rem);       /* 32 -> 52 */
    --text-h2: clamp(1.5rem, 1.28rem + .95vw, 2.125rem);    /* 24 -> 34 */
    --text-h3: clamp(1.1875rem, 1.1rem + .38vw, 1.4375rem); /* 19 -> 23 */
    --text-body: 1.0625rem;  /* 17 */
    --text-ui: .9375rem;     /* 15 */
    --text-small: .8125rem;  /* 13 */
    --text-input: 1rem;      /* 16, so iOS never zooms on focus */
    --leading-body: 1.55;
    --leading-tight: 1.05;

    /* Space (4 px base) */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 28px;
    --s-8: 32px;
    --s-10: 48px;
    --s-12: 64px;
    --s-14: 80px;
    --s-16: 96px;
    --gutter: clamp(16px, 4vw, 40px);
    --content-max: 1320px;
    --reading-max: 720px;

    /* Shape */
    --r-xs: 4px;
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* Depth: warm, layered */
    --shadow-1: 0 1px 2px rgb(var(--shade) / .04), 0 6px 18px -10px rgb(var(--shade) / .18);
    --shadow-2: 0 2px 4px rgb(var(--shade) / .05), 0 14px 28px -14px rgb(var(--shade) / .28);
    --shadow-3: 0 18px 40px -18px rgb(var(--shade) / .35);
    --shadow-4: 0 30px 60px -20px rgb(var(--shade) / .5);

    /* Layers */
    --z-base: 0;
    --z-sticky: 20;
    --z-dropdown: 30;
    --z-overlay: 40;
    --z-modal: 60;
    --z-toast: 80;
    --z-tooltip: 90;

    /* Touch */
    --hit: 48px;
    --hit-cook: 64px;

    /* Motion */
    --dur-instant: 90ms;
    --dur-quick: 160ms;
    --dur-base: 240ms;
    --dur-smooth: 380ms;
    --dur-slow: 600ms;
    --ease-standard: cubic-bezier(.2, .8, .2, 1);
    --ease-exit: cubic-bezier(.4, 0, 1, 1);
    /* Spring with about 4% overshoot. */
    --ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .281 6.7%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.041 21.6%, 1.047 23.5%, 1.043 25.8%, 1.018 31.3%, 1.004 36.4%, .998 45.8%, 1);
    /* Firm settle for toggles and check offs. */
    --ease-snap: linear(0, .144 4.5%, .472 11.1%, .792 19%, .946 26.1%, 1.011 34.2%, 1.018 41.3%, 1.003 58.6%, 1);
    --stagger: 14ms;
  }

  /* Dark, "after service" */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --flour: #15120F;
    --parchment: #1D1915;
    --crust: #2E2822;
    --card: #221D18;
    --ink: #F3ECE2;
    --smoke: #B8ADA1;
    --ash: #968B80;
    --accent: #F3ECE2;
    --on-accent: #15120F;
    --accent-hover: #D9D0C4;
    --basil: #7FC49A;
    --basil-tint: #1C2A21;
    --basil-line: #2F4A38;
    --saffron: #E9B75A;
    --saffron-fill: #F0B93F;
    --saffron-tint: #2C2414;
    --saffron-line: #4F3F1F;
    --beet: #EE7F95;
    --beet-tint: #2F1A1F;
    --beet-line: #57303A;
    --beet-soft: #6E3B47;
    --blueberry: #9DB7E3;
    --blueberry-tint: #1A2130;
    --blueberry-line: #2E3A52;
    --overlay: rgb(0 0 0 / .6);
    --shade: 0 0 0;
    --photo-inset: inset 0 0 0 1px rgb(255 255 255 / .04), inset 0 -40px 80px -40px rgb(0 0 0 / .35);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --flour: #15120F;
      --parchment: #1D1915;
      --crust: #2E2822;
      --card: #221D18;
      --ink: #F3ECE2;
      --smoke: #B8ADA1;
      --ash: #968B80;
      --accent: #F3ECE2;
      --on-accent: #15120F;
      --accent-hover: #D9D0C4;
      --basil: #7FC49A;
      --basil-tint: #1C2A21;
      --basil-line: #2F4A38;
      --saffron: #E9B75A;
      --saffron-fill: #F0B93F;
      --saffron-tint: #2C2414;
      --saffron-line: #4F3F1F;
      --beet: #EE7F95;
      --beet-tint: #2F1A1F;
      --beet-line: #57303A;
      --beet-soft: #6E3B47;
      --blueberry: #9DB7E3;
      --blueberry-tint: #1A2130;
      --blueberry-line: #2E3A52;
      --overlay: rgb(0 0 0 / .6);
      --shade: 0 0 0;
      --photo-inset: inset 0 0 0 1px rgb(255 255 255 / .04), inset 0 -40px 80px -40px rgb(0 0 0 / .35);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-quick: 1ms;
      --dur-base: 120ms;
      --dur-smooth: 160ms;
      --dur-slow: 160ms;
      --ease-spring: ease-out;
      --ease-snap: ease-out;
      --stagger: 0ms;
    }
  }
}

/* css/base.css */
@layer reset, base;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first last; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ol[role="list"], ul[role="list"], .list-reset { list-style: none; padding: 0; }
  img, picture, svg, video, canvas { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  button:disabled { cursor: not-allowed; }
  textarea { resize: vertical; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
  :where(a) { color: inherit; }
}

@layer base {
  @view-transition { navigation: auto; }

  html {
    background: var(--flour);
    scroll-padding-top: 88px;
    interpolate-size: allow-keywords;
  }

  body {
    min-height: 100dvh;
    background-color: var(--flour);
    /* Paper grain: fractal noise, extremely faint, never on photos or cards. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .022 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-feature-settings: "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
  }

  h1, h2, h3, .display {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-wrap: balance;
    font-optical-sizing: auto;
  }
  h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
  h2 { font-size: var(--text-h2); }
  h3 { font-size: var(--text-h3); }
  p { text-wrap: pretty; }

  a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--dur-quick) var(--ease-standard);
  }
  @media (hover: hover) and (pointer: fine) {
    a:hover { color: var(--smoke); }
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
  }
  :focus:not(:focus-visible) { outline: none; }

  ::selection { background: color-mix(in srgb, var(--saffron-fill) 45%, transparent); color: var(--ink); }

  input::placeholder, textarea::placeholder { color: var(--ash); opacity: 1; }

  code, kbd, samp, pre { font-family: var(--font-mono); font-size: .9em; }

  .num, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "cv11"; }

  .visually-hidden:not(:focus):not(:active) {
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--s-4);
    inset-block-start: calc(env(safe-area-inset-top) + var(--s-2));
    z-index: var(--z-tooltip);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    transform: translateY(-200%);
    transition: transform var(--dur-quick) var(--ease-standard);
  }
  .skip-link:focus { transform: none; color: var(--on-accent); }

  @media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    *, *::before, *::after { scroll-behavior: auto !important; }
  }
}

/* css/layout.css */
@layer layout {
  .page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  .page > main { flex: 1; }

  .container {
    width: 100%;
    max-width: calc(var(--content-max) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  }
  .container--reading { max-width: calc(var(--reading-max) + 2 * var(--gutter)); }

  .stack { display: grid; gap: var(--stack-gap, var(--s-4)); align-content: start; }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--s-2)); align-items: center; }

  /* Top bar */
  .topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    padding-top: env(safe-area-inset-top);
    background: color-mix(in srgb, var(--flour) 88%, transparent);
    backdrop-filter: saturate(1.2) blur(10px);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
  }
  .topbar__inner {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-height: 64px;
  }
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--hit);
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
  }
  .brand svg { flex: none; width: 30px; height: 30px; }
  .brand:hover { color: var(--ink); }

  /* Footer */
  .site-footer {
    margin-top: var(--s-12);
    border-top: 1px solid var(--crust);
    padding-block: var(--s-8) calc(var(--s-8) + env(safe-area-inset-bottom));
    font-size: var(--text-small);
    color: var(--smoke);
  }
  .site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; justify-content: space-between; }
  .site-footer nav ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
  .site-footer a { color: var(--smoke); display: inline-flex; min-height: 32px; align-items: center; }
}

/* css/pages/holding.css */
@layer pages {
  .holding {
    display: grid;
    gap: var(--s-6);
    padding-block: clamp(var(--s-10), 10vh, var(--s-16)) var(--s-10);
  }
  .holding > * { max-width: 1080px;  }
  .holding__title {
    font-size: var(--text-hero);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variation-settings: "opsz" 144;
  }
  .holding__title em { font-weight: 400; }
  .holding__lead {
    font-size: 1.1875rem;
    color: var(--smoke);
    max-width: 38ch;
  }
  .holding__points {
    display: grid;
    gap: var(--s-3);
    padding: 0;
    margin: var(--s-4) 0 0;
    list-style: none;
  }
  .holding__points li {
    padding: var(--s-4) var(--s-5);
    background: var(--card);
    border: 1px solid var(--crust);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
  }
  .holding__points strong {
    display: block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
  }
  .holding__points li { color: var(--smoke); }
  .holding__points strong { color: var(--ink); }
  .holding__status {
    font-size: var(--text-ui);
    color: var(--smoke);
    padding-top: var(--s-2);
  }
  @media (min-width: 768px) {
    .holding__points { grid-template-columns: repeat(3, 1fr); }
  }

  .error-page {
    display: grid;
    gap: var(--s-4);
    padding-block: clamp(var(--s-10), 12vh, var(--s-16));
  }
  .error-page > * { max-width: 640px;  }
  .error-page__code { font-size: var(--text-small); color: var(--smoke); letter-spacing: .08em; }
  .error-page__text { color: var(--smoke); }
  .error-page__home { display: inline-flex; align-items: center; min-height: var(--hit); font-weight: 600; }
  .error-page__ref { font-size: var(--text-small); color: var(--smoke); }
}

/* css/utilities.css */
@layer utilities {
  .u-muted { color: var(--smoke); }
  .u-small { font-size: var(--text-small); }
  .u-center { text-align: center; }
  .u-nowrap { white-space: nowrap; }
}