/*
 * Loaded first (leading underscore sorts ahead of other files under Propshaft's
 * :app bulk include). Declares the @layer order and the full design-token set.
 *
 * THEME API — a site retunes the base by redefining custom properties. Each site
 * loads its own theme by payload isolation (sites/<key>/theme.css, bundled only on
 * that host — see stylesheet_bundle), so it overrides the knobs directly at :root;
 * no scoping selector is needed. The primary knobs are the brand hue/chroma below;
 * redefining `--brand-h` alone re-tints links, accents, buttons and surfaces
 * coherently. Dark mode is orthogonal — it flips lightness via
 * `html[data-theme="dark"]`.
 * See instructions/unofficial-37signals-coding-style-guide/css.md
 */

@layer reset, base, layout, components, utilities;

:root {
  /* ── Spacing ── */
  --inline-space: 1ch;
  --inline-space-half: calc(var(--inline-space) / 2);
  --inline-space-double: calc(var(--inline-space) * 2);
  --block-space: 1rem;
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-double: calc(var(--block-space) * 2);
  --block-space-triple: calc(var(--block-space) * 3);

  /* Height of the sticky admin masthead — what elements below it (e.g. the editor
     toolbar) offset their own sticky top by. Approximate: the bar is content-sized. */
  --admin-bar-height: 3rem;

  /* ── Type ── */
  --font-sans: "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji";
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: var(--font-sans); /* headings — Assistant, the default face (see fonts.css) */

  --text-x-small: 0.75rem;
  --text-small: 0.85rem;
  --text-normal: 1rem;
  --text-medium: 1.15rem;
  --text-large: 1.4rem;
  --text-x-large: 1.85rem;
  --text-xx-large: 2.6rem;
  --text-display: clamp(2.4rem, 1.6rem + 3.6vw, 3.6rem);

  --line-height: 1.6;
  --line-height-tight: 1.15;
  --measure: 68ch; /* readable line length for long-form prose */
  --tracking-tight: -0.011em;

  /* ── Layout ── mobile-first: the page fills small screens (minus the gutter)
     and caps at --width-page on large ones. Prose stays at --measure. */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --width-page: 72rem;

  /* ── Radius & borders ── */
  --radius-small: 0.35rem;
  --radius: 0.6rem;
  --radius-large: 1rem;
  --border-width: 1px;
  --border: var(--border-width) solid var(--color-border);

  /* ── Controls ── one shared height for the small bar controls (toggle, flag,
     admin link, hamburger) so a header/footer row sits on a single clean line. */
  --control-size: 1.5rem;

  /* ── Elevation ── */
  --shadow: 0 1px 2px oklch(var(--lch-shadow) / 0.05),
            0 4px 12px -4px oklch(var(--lch-shadow) / 0.12);
  --shadow-large: 0 2px 4px oklch(var(--lch-shadow) / 0.06),
                  0 12px 32px -8px oklch(var(--lch-shadow) / 0.2);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 150ms var(--ease-out);

  /* ── Focus ── */
  --focus-ring: 2px solid oklch(var(--lch-brand-strong));
  --focus-offset: 2px;

  /* ── Z-index scale ── */
  --z-dropdown: 10;
  --z-header: 20;
  --z-flash: 30;
  --z-dialog: 40;

  /* ══ Color ══
     Stored as OKLCH channels (L C H), composed via oklch() so a theme retints
     by redefining a channel. Brand tones derive from the two knobs below. */

  /* Brand knobs — a calm blue primary and a clay accent. Neutrals carry their
     own warm hue so the "paper" reads cream independently of the brand. */
  --brand-h: 245;   /* calm, slightly muted blue */
  --brand-c: 0.09;
  --neutral-h: 80;  /* warm paper tint for the ink scale */
  --clay-h: 45;     /* terracotta accent */
  --clay-c: 0.1;    /* accent chroma (themeable, like --brand-c) */

  /* Ink scale — warm near-neutrals. Light: darkest (ink/text) → lightest (paper). */
  --lch-canvas: 98.5% 0.008 var(--neutral-h);
  --lch-ink-darkest: 25% 0.012 var(--neutral-h);
  --lch-ink-darker: 34% 0.011 var(--neutral-h);
  --lch-ink-dark: 45% 0.01 var(--neutral-h);
  /* 55.5%, not 58%: --color-muted carries the footer, hints and timestamps at --text-small,
     and 58% lands at 4.10:1 on the canvas — just under the 4.5:1 AA needs for body text. */
  --lch-ink-medium: 55.5% 0.011 var(--neutral-h);
  --lch-ink-light: 80% 0.012 var(--neutral-h);
  --lch-ink-lighter: 90% 0.011 var(--neutral-h);
  --lch-ink-lightest: 95.5% 0.01 var(--neutral-h);
  --lch-shadow: 30% 0.02 var(--neutral-h);

  /* Brand (sage) + clay accent scales */
  --lch-brand-strong: 43% calc(var(--brand-c) + 0.025) var(--brand-h);
  --lch-brand: 54% var(--brand-c) var(--brand-h);
  --lch-brand-soft: 90% calc(var(--brand-c) / 2.2) var(--brand-h);
  --lch-brand-tint: 96% calc(var(--brand-c) / 3.5) var(--brand-h);
  --lch-clay: 58% var(--clay-c) var(--clay-h);
  --lch-clay-soft: 90% 0.045 var(--clay-h);

  /* Status hues (fixed, not brand-tied) */
  --lch-danger: 55% 0.19 25;
  --lch-positive: 55% 0.12 152;

  /* Colors: named ink steps */
  --color-ink: oklch(var(--lch-ink-darkest));
  --color-ink-darker: oklch(var(--lch-ink-darker));
  --color-ink-dark: oklch(var(--lch-ink-dark));
  --color-ink-medium: oklch(var(--lch-ink-medium));
  --color-ink-light: oklch(var(--lch-ink-light));
  --color-ink-lighter: oklch(var(--lch-ink-lighter));
  --color-ink-lightest: oklch(var(--lch-ink-lightest));

  /* Colors: semantic abstractions — what components reference */
  --color-canvas: oklch(var(--lch-canvas));
  --color-surface: oklch(var(--lch-ink-lightest));
  --color-surface-raised: oklch(99.2% 0.006 var(--neutral-h));
  --color-border: oklch(var(--lch-ink-lighter));
  --color-border-strong: oklch(var(--lch-ink-light));
  --color-text: var(--color-ink);
  --color-subtle: var(--color-ink-dark);
  --color-muted: var(--color-ink-medium);

  --color-brand: oklch(var(--lch-brand));
  --color-brand-strong: oklch(var(--lch-brand-strong));
  --color-brand-soft: oklch(var(--lch-brand-soft));
  --color-brand-tint: oklch(var(--lch-brand-tint));
  --color-clay: oklch(var(--lch-clay));
  --color-clay-soft: oklch(var(--lch-clay-soft));
  --color-accent: var(--color-clay);
  --color-link: oklch(var(--lch-brand-strong));
  --color-on-brand: oklch(98% 0.01 var(--brand-h)); /* text on a brand fill */

  --color-danger: oklch(var(--lch-danger));
  --color-positive: oklch(var(--lch-positive));
  --color-caution: oklch(70% 0.17 68); /* amber — drafts, unpublished/preview markers */
  --color-whatsapp: oklch(0.72 0.17 152); /* WhatsApp brand green (#25D366) */
  --color-zoom: oklch(0.64 0.19 258); /* Zoom brand blue (#2D8CFF) */
  /* Icon glyphs (mask data-URIs) live with the component that owns them: --glyph-zoom in
     zoom-button.css, --glyph-whatsapp in whatsapp-button.css, --glyph-fullscreen in courses/meetings.css. */
}

/* ── Dark mode ── flips only the ink lightness + lifts brand for contrast.
   Applied by explicit toggle and, absent a choice, by system preference. */
html[data-theme="dark"] {
  color-scheme: dark;

  --lch-canvas: 22% 0.008 var(--neutral-h);
  --lch-ink-darkest: 93% 0.008 var(--neutral-h);
  --lch-ink-darker: 84% 0.008 var(--neutral-h);
  --lch-ink-dark: 74% 0.008 var(--neutral-h);
  --lch-ink-medium: 63.5% 0.009 var(--neutral-h); /* 60% reads 3.94:1 on a raised surface */
  --lch-ink-light: 44% 0.01 var(--neutral-h);
  --lch-ink-lighter: 34% 0.01 var(--neutral-h);
  --lch-ink-lightest: 27% 0.009 var(--neutral-h);
  --lch-shadow: 0% 0 0;

  --lch-brand-strong: 72% var(--brand-c) var(--brand-h);
  --lch-brand: 66% var(--brand-c) var(--brand-h);
  --lch-brand-soft: 36% calc(var(--brand-c) / 1.5) var(--brand-h);
  --lch-brand-tint: 30% calc(var(--brand-c) / 2) var(--brand-h);
  --lch-clay: 66% var(--clay-c) var(--clay-h);
  --lch-clay-soft: 34% 0.05 var(--clay-h);
  /* The one status hue that needs lifting here: at 55% it reads 3.23:1 on the dark canvas,
     and error text has to be legible. The light value stays put — it clears 4.5:1 there. */
  --lch-danger: 63% 0.19 25;

  --color-surface-raised: oklch(26% 0.01 var(--neutral-h));
  --color-on-brand: oklch(20% 0.01 var(--brand-h));
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;

    --lch-canvas: 22% 0.008 var(--neutral-h);
    --lch-ink-darkest: 93% 0.008 var(--neutral-h);
    --lch-ink-darker: 84% 0.008 var(--neutral-h);
    --lch-ink-dark: 74% 0.008 var(--neutral-h);
    --lch-ink-medium: 63.5% 0.009 var(--neutral-h); /* 60% reads 3.94:1 on a raised surface */
    --lch-ink-light: 44% 0.01 var(--neutral-h);
    --lch-ink-lighter: 34% 0.01 var(--neutral-h);
    --lch-ink-lightest: 27% 0.009 var(--neutral-h);
    --lch-shadow: 0% 0 0;

    --lch-brand-strong: 72% var(--brand-c) var(--brand-h);
    --lch-brand: 66% var(--brand-c) var(--brand-h);
    --lch-brand-soft: 36% calc(var(--brand-c) / 1.5) var(--brand-h);
    --lch-brand-tint: 30% calc(var(--brand-c) / 2) var(--brand-h);
    --lch-clay: 66% var(--clay-c) var(--clay-h);
    --lch-clay-soft: 34% 0.05 var(--clay-h);
    /* The one status hue that needs lifting here: at 55% it reads 3.23:1 on the dark canvas,
       and error text has to be legible. The light value stays put — it clears 4.5:1 there. */
    --lch-danger: 63% 0.19 25;

    --color-surface-raised: oklch(26% 0.01 var(--neutral-h));
    --color-on-brand: oklch(20% 0.01 var(--brand-h));
  }
}