/*
 * Paperlane tokens. Every color on the page, including the drawn phone and Mac screens,
 * the logo and the app icon, comes from this file. Palettes (60/30/10):
 *   c60 --paper  page and large surfaces        c30 --deep  Mac band, Pro plan, footer
 *   c10 --accent buttons, links, logo, the accent inside the drawn app screens
 * Each palette sets the base values; the derived block below mixes the rest.
 */
.t-app {
  color-scheme: light;
  /* 60: surfaces */
  --paper: #f4f1ea;
  --sand: #e8e1d3;
  --card: #fbf9f4;
  --glow: #f6efe0;
  --field: #fff;
  /* Text */
  --ink: #16140f;
  --ink-2: #2a2721;
  --muted: #5b5549;
  /* Lines */
  --line: #ddd5c5;
  --line-soft: #e8e2d6;
  /* 10: accent */
  --accent: #b8431c;
  --accent-dark: #96360f;
  --on-accent: #fff;
  --on-accent-dark: #fff;
  --tint: #f3e0d6;
  --tint-ink: #8a3110;
  --mark: #f1c453;
  --mark-on: #16140f;
  --mark-tint: #f6e9c4;
  --mark-ink: #6b4d0a;
  --logo-fg: #f4f1ea;
  --focus: #b8431c;
  /* 30: deep band */
  --deep: #16140f;
  --on-deep: #f4f1ea;
  --on-deep-muted: #b9b2a4;
  --accent-on-deep: #e8794f;
  /* Store badges stay black, as Apple's do */
  --store-bg: #000;
  --store-fg: #fff;
  --store-edge: #000;
  --store-hover: #26231d;
  --shadow: #16140f;
  /* Drawn device screens */
  --bezel: #16140f;
  --bezel-edge: #4a453c;
  --bezel-rim: #2a2721;
  --scr-bg: #fbf9f5;
  --scr-card: #fff;
  --scr-ink: #16140f;
  --scr-ink-2: #2a2721;
  --scr-muted: #6d675b;
  --scr-faint: #8a8378;
  --scr-accent: var(--accent);
  --cover-1: #2f4a3f;
  --cover-3: #2c3e57;
  --cover-4: #d9a63c;

  --sans: "Instrument Sans Variable", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --serif: "Newsreader Variable", "Iowan Old Style", Georgia, serif;

  /* Mobile-first spacing: one gutter that grows with the viewport */
  --gutter: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
  --wrap: 72rem;
  --header-h: 3.75rem;
  --tap: 3rem;
  --r-sm: 8px; --r: 12px; --r-lg: 20px; --r-xl: 28px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  background: var(--paper); color: var(--ink); font-family: var(--sans);
  font-size: 1.0625rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Derived tokens: mixed from the base values above, so palettes only set those. */
.t-app {
  --sand-2: color-mix(in srgb, var(--sand) 94%, var(--ink));
  --deep-line: color-mix(in srgb, var(--on-deep) 14%, transparent);
  --shade-1: color-mix(in srgb, var(--shadow) 7%, transparent);
  --shade-2: color-mix(in srgb, var(--shadow) 16%, transparent);
  --shade-3: color-mix(in srgb, var(--shadow) 32%, transparent);
  --shade-4: color-mix(in srgb, var(--shadow) 48%, transparent);
  --scr-fill: color-mix(in srgb, var(--sand) 55%, var(--scr-bg));
  --scr-track: color-mix(in srgb, var(--sand) 70%, var(--scr-bg));
  --scr-line: color-mix(in srgb, var(--sand) 45%, var(--scr-bg));
  --scr-line-2: color-mix(in srgb, var(--sand) 80%, var(--scr-bg));
  --scr-bar: color-mix(in srgb, var(--sand) 92%, var(--scr-ink));
  --scr-note: color-mix(in srgb, var(--mark) 18%, var(--scr-bg));
  --scr-sheet: color-mix(in srgb, var(--sand) 25%, var(--scr-bg));
  --scr-chrome: color-mix(in srgb, var(--sand) 50%, var(--scr-bg));
  --scr-side: color-mix(in srgb, var(--sand) 38%, var(--scr-bg));
  --scr-pop: var(--scr-ink);
  --scr-on-pop: var(--scr-bg);
}

/* ---------- Palettes ----------
   Selectors hit both <html> and <body>, which both carry .t-app. */
[data-palette="mint"].t-app, [data-palette="mint"] .t-app {
  --paper: #edf4f0; --sand: #dde9e3; --card: #f7fbf8; --glow: #f3f9f5; --field: #fff;
  --ink: #101c22; --ink-2: #22323a; --muted: #4a5a5f; --line: #c9d9d1; --line-soft: #dbe6e0;
  --accent: #0b7d5b; --accent-dark: #08664a; --on-accent: #fff; --on-accent-dark: #fff;
  --tint: #d3ece1; --tint-ink: #08664a; --mark: #9fe3c5; --mark-on: #101c22; --mark-tint: #dbe5ee; --mark-ink: #1f3c57;
  --logo-fg: #f4fbf7; --focus: #0b7d5b;
  --deep: #132a3a; --on-deep: #eef4f1; --on-deep-muted: #b9c6cf; --accent-on-deep: #5fd3a8;
  --store-hover: #1c2a33; --shadow: #0c1a22;
  --bezel: #101c22; --bezel-edge: #3c4b52; --bezel-rim: #22323a;
  --scr-bg: #f9fcfa; --scr-card: #fff; --scr-ink: #101c22; --scr-ink-2: #22323a; --scr-muted: #56656a; --scr-faint: #7e8c90;
  --cover-1: #1f4f5c; --cover-3: #2b3a63; --cover-4: #d1a64a;
}
[data-palette="midnight"].t-app, [data-palette="midnight"] .t-app {
  color-scheme: dark;
  --paper: #0f1217; --sand: #1a1f29; --card: #151a22; --glow: #232a39; --field: #151a22;
  --ink: #eceef2; --ink-2: #d5d9e0; --muted: #9aa3b2; --line: #2b3241; --line-soft: #222834;
  --accent: #ff8f5a; --accent-dark: #ffa77d; --on-accent: #1a0d06; --on-accent-dark: #1a0d06;
  --tint: #3a2419; --tint-ink: #ffb48f; --mark: #f2c45a; --mark-on: #14110a; --mark-tint: #3a3017; --mark-ink: #f2cf7a;
  --logo-fg: #fff6f0; --focus: #ff8f5a;
  --deep: #1a1f29; --on-deep: #eceef2; --on-deep-muted: #a3acba; --accent-on-deep: #ff9d6e;
  --store-edge: #3a4252; --store-hover: #1d2330; --shadow: #000;
  --bezel: #050608; --bezel-edge: #2f3542; --bezel-rim: #14171d;
  --scr-bg: #12161d; --scr-card: #1b212b; --scr-ink: #eceef2; --scr-ink-2: #cfd4dc; --scr-muted: #98a1b0; --scr-faint: #6f7889; --scr-accent: #ff9d6e;
  --cover-1: #3d6b5c; --cover-3: #4b6390; --cover-4: #d9a63c;
}
[data-palette="citrus"].t-app, [data-palette="citrus"] .t-app {
  --paper: #fbf7ea; --sand: #f3ecd4; --card: #fffdf6; --glow: #fff8de; --field: #fff;
  --ink: #17160f; --ink-2: #2b2a20; --muted: #5a5340; --line: #e3dabd; --line-soft: #eee6cc;
  --accent: #2448c9; --accent-dark: #1c3aa6; --on-accent: #fff; --on-accent-dark: #fff;
  --tint: #dfe5f8; --tint-ink: #1c3aa6; --mark: #f2c230; --mark-on: #17160f; --mark-tint: #f8e7a6; --mark-ink: #5c4500;
  --logo-fg: #fffdf6; --focus: #2448c9;
  --deep: #f2c230; --on-deep: #1b1606; --on-deep-muted: #4a3e12; --accent-on-deep: #1d3aa8;
  --store-hover: #26231d; --shadow: #3a2f05;
  --bezel: #17160f; --bezel-edge: #4a4636; --bezel-rim: #2b2a20;
  --scr-bg: #fffdf6; --scr-card: #fff; --scr-ink: #17160f; --scr-ink-2: #2b2a20; --scr-muted: #625a45; --scr-faint: #8a8270;
  --cover-1: #1f5c4a; --cover-3: #c2412d; --cover-4: #f2c230;
}

/* Fixed chrome: anchors clear the sticky header; the demo palette button clears the phone bar. */
html.t-app { --anchor-offset: 1rem; }
html.t-app:has(.chips) { --anchor-offset: 4.75rem; }
@media (min-width: 900px) {
  html.t-app { --anchor-offset: calc(var(--header-h) + 1rem); }
  html.t-app:has(.chips) { --anchor-offset: calc(var(--header-h) + 4.75rem); }
}
@media (max-width: 899px) {
  html.t-app.getbar-on { --demo-chrome-lift: calc(4.5rem + 1px); }
}
@media (min-width: 600px) { .t-app { --gutter: max(1.5rem, env(safe-area-inset-left), env(safe-area-inset-right)); } }
@media (min-width: 1000px) { .t-app { --gutter: 2.5rem; --header-h: 4.25rem; } }

html.t-app, body.t-app { margin: 0; background: var(--paper); color: var(--ink); }
body.t-app { overflow-x: clip; }
html.t-app.menu-open, html.t-app.menu-open body { overflow: hidden; }
.t-app *, .t-app *::before, .t-app *::after { box-sizing: border-box; }
.t-app h1, .t-app h2, .t-app h3, .t-app p, .t-app ul, .t-app ol, .t-app dl, .t-app dd, .t-app figure, .t-app fieldset { margin: 0; }
.t-app fieldset { padding: 0; border: 0; min-width: 0; }
.t-app ul, .t-app ol { padding: 0; list-style: none; }
.t-app img, .t-app svg { display: block; }
.t-app a { color: var(--ember-dark); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 0.15s, text-underline-offset 0.15s; }
.t-app button, .t-app input, .t-app textarea, .t-app select { font: inherit; color: inherit; }
.t-app input, .t-app textarea, .t-app select { font-size: max(16px, 1rem); }
.t-app button { touch-action: manipulation; }
.t-app :focus { outline: none; }
.t-app :focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.t-app .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.t-app .skip { position: fixed; left: var(--gutter); top: max(0.5rem, env(safe-area-inset-top)); transform: translateY(-200%); background: var(--ink); color: var(--paper); padding: 0.8rem 1rem; z-index: 100; border-radius: var(--r-sm); font-weight: 600; }
.t-app .skip:focus { transform: none; }
@media (hover: hover) { .t-app a:hover { color: var(--ink); text-underline-offset: 0.3em; } }
@media (prefers-reduced-motion: reduce) {
  /* transition: none (not a 0.01ms duration): a zero-length transition still reports the old color
     until the next frame, so palette switches and contrast checks would read stale values. */
  .t-app, .t-app *, .t-app *::before, .t-app *::after { transition: none !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) { .t-app :focus-visible { outline: 2px solid Highlight; } .t-app .btn, .t-app .store { border: 1px solid ButtonText; } }