/* Hallmark · tokens — theme: Cobalt (modern-minimal) · MacDupl
 * Paper band: cool light (L 98.5%, hue 250) · Display: grotesk-sans (Space Grotesk)
 * Accent hue: electric cobalt oklch(58% 0.20 256)
 * Dark scheme: same anchors, lightness/chroma flipped per color.md dark recipe.
 *
 * ⚠ CACHE RULE — READ BEFORE EDITING.
 * Pages are served `max-age=0, must-revalidate` (always fresh) but this file is
 * cached for 24 h, so HTML and tokens can disagree: a page that uses a token
 * added here renders with that property *dropped entirely* until the CSS cache
 * expires. That is exactly how the 9 icon tints shipped colourless.
 * Every page therefore links this file as `/tokens.css?v=N`.
 *
 * If you ADD OR RENAME A TOKEN, bump the version in the SAME commit:
 *   grep -rl 'tokens\.css?v=' site/ scripts/ | xargs perl -i -pe 's/tokens\.css\?v=\d+/tokens.css?v=<N+1>/g'
 * then re-run `python3 scripts/apps/build.py`. Editing an existing token's
 * *value* is safe without a bump — it just takes up to 24 h to roll out.
 * Current version: v=2
 */
/* Self-hosted webfonts (latin + latin-ext subsets, pulled from Google Fonts).
 * Served first-party on purpose: no render-blocking cross-origin CSS in the
 * critical path, and no third-party request on page view. Do not swap these
 * back for a fonts.googleapis.com <link>. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/space-grotesk-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/space-grotesk-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/space-grotesk-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/space-grotesk-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* colour — paper / ink / neutrals / accent */
  --color-paper:         oklch(98.5% 0.004 250);
  --color-paper-2:       oklch(96.4% 0.006 250);
  --color-rule:          oklch(90% 0.008 252);
  --color-rule-2:        oklch(83% 0.012 254);
  --color-muted:         oklch(46% 0.016 256);
  --color-ink:           oklch(24% 0.02 258);
  --color-ink-2:         oklch(34% 0.018 257);
  --color-graphite:      oklch(22% 0.016 260);
  --color-band:          oklch(20% 0.016 260);
  --color-band-ink:      oklch(93% 0.008 255);
  --color-band-muted:    oklch(72% 0.012 255);
  --color-band-rule:     oklch(32% 0.014 258);
  --color-accent:        oklch(48% 0.19 256);
  --color-accent-hover:  oklch(43% 0.18 256);
  --color-accent-bright: oklch(72% 0.14 256);
  --color-accent-ink:    oklch(98.5% 0.004 250);
  --color-focus:         oklch(48% 0.19 256);
  --color-scrim:         oklch(20% 0.016 260 / 0.35);
  --shadow-panel:        0 1px 2px oklch(20% 0.01 260 / 0.05), 0 24px 64px -32px oklch(20% 0.02 260 / 0.35);

  /* icon tints — the app's 9 TintColor cases (Sources/MacDupl/Models/Clone.swift).
   * OKLCH approximations of the macOS system colours the app actually renders.
   * These are MacDupl's own feature, never a third-party brand colour. */
  --tint-none:   oklch(83% 0.012 254);
  --tint-red:    oklch(63% 0.23 29);
  --tint-orange: oklch(75% 0.18 58);
  --tint-yellow: oklch(86% 0.17 92);
  --tint-green:  oklch(74% 0.19 145);
  --tint-teal:   oklch(69% 0.11 213);
  --tint-blue:   oklch(58% 0.22 258);
  --tint-purple: oklch(60% 0.22 314);
  --tint-pink:   oklch(64% 0.24 15);

  /* type — 2+1: Space Grotesk display · Inter body · JetBrains Mono readout */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* scale — 1.25 major third on 16px */
  --text-xs:      0.8rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-md:      1.125rem;
  --text-lg:      1.375rem;
  --text-xl:      1.75rem;
  --text-2xl:     2.25rem;
  --text-display: clamp(2.25rem, 2.6vw + 1rem, 3.4rem);

  /* space — 4pt, named */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* motion */
  --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:    420ms;

  /* structure */
  --radius-btn:   6px;
  --radius-card:  10px;
  --radius-media: 12px;
  --rule: 1px solid var(--color-rule);

  /* z — named scale */
  --z-raised:  10;
  --z-sticky:  200;
  --z-modal:   400;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper:         oklch(15% 0.01 255);
    --color-paper-2:       oklch(18.5% 0.012 255);
    --color-rule:          oklch(29% 0.012 255);
    --color-rule-2:        oklch(38% 0.014 255);
    --color-muted:         oklch(66% 0.014 255);
    --color-ink:           oklch(93% 0.008 255);
    --color-ink-2:         oklch(82% 0.01 255);
    --color-graphite:      oklch(21% 0.014 258);
    --color-band:          oklch(23% 0.015 258);
    --color-band-ink:      oklch(93% 0.008 255);
    --color-band-muted:    oklch(70% 0.012 255);
    --color-band-rule:     oklch(34% 0.014 258);
    --color-accent:        oklch(64% 0.17 256);
    --color-accent-hover:  oklch(70% 0.155 256);
    --color-accent-bright: oklch(74% 0.14 256);
    --color-accent-ink:    oklch(15% 0.01 255);
    --color-focus:         oklch(64% 0.17 256);
    --color-scrim:         oklch(5% 0.01 260 / 0.5);
    --shadow-panel:        0 1px 2px oklch(5% 0.01 260 / 0.3), 0 24px 64px -32px oklch(5% 0.01 260 / 0.6);

    /* tints — the app's dark-appearance system colours, a touch brighter */
    --tint-none:   oklch(38% 0.014 255);
    --tint-red:    oklch(66% 0.22 29);
    --tint-orange: oklch(77% 0.17 60);
    --tint-yellow: oklch(88% 0.17 94);
    --tint-green:  oklch(78% 0.19 146);
    --tint-teal:   oklch(77% 0.11 213);
    --tint-blue:   oklch(63% 0.21 258);
    --tint-purple: oklch(65% 0.23 314);
    --tint-pink:   oklch(66% 0.23 13);
  }
}