/**
 * App theme — the `@layer theme` slot, loaded last and out-ranking everything
 * below it. Design tokens only; structural CSS lives in `app.css`.
 */

@layer theme {
  :root {
    /* Typography — integrated/system faces only, no webfont loads.
       Display: a warm literary serif built into Apple platforms, with
       Georgia (Windows/Linux) as the non-Apple fallback. Body: the
       platform UI sans. Readout: the platform's native monospace, for
       EXIF/timestamps — the numbers a camera burns into a print. */
    --font-family-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    --font-family-base:
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Helvetica,
      Arial,
      sans-serif;
    --font-family-mono:
      ui-monospace,
      'SF Mono',
      Menlo,
      Consolas,
      'Liberation Mono',
      monospace;

    /* FONT SIZE */
    --f-timer: 7rem;
    --f1: 1.5rem;
    --f2: 1.25rem;
    --f3: 1.125rem;
    --f4: 1rem;
    --f5: 0.875rem;
    --f6: 0.75rem;
    --f7: 0.625rem;

    /* SPACING */
    --s4: 1.5rem;
    --s5: 2rem;
    --s6: 3rem;

    /* Layout */

    /* FONT WEIGHT */
    --fw-black: 800;

    /* LINE HEIGHT */
    --lh-tight: 1.3;
    --lh-base: 1.6;

    /* BORDER RADIUS — crisp, print-mat corners rather than bubbly ones */
    --br-sm: 3px;
    --br-base: 6px;
    --br-lg: 10px;
    --br-xl: 14px;

    /* Shadows */
    --shadow-sm:
      0 2px 4px 0 rgba(0, 0, 0, 0.24),
      0 1px 2px 0 rgba(0, 0, 0, 0.18);
    --shadow-base:
      0 4px 10px 0 rgba(0, 0, 0, 0.32),
      0 2px 4px 0 rgba(0, 0, 0, 0.24);
    --shadow-md:
      0 8px 20px -2px rgba(0, 0, 0, 0.4),
      0 4px 8px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg:
      0 16px 32px -4px rgba(0, 0, 0, 0.5),
      0 8px 16px -4px rgba(0, 0, 0, 0.35);
    /* The safelight glow — used sparingly, behind the primary action only. */
    --shadow-brand: 0 6px 20px -4px hsl(36 92% 55% / 0.35);

    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-spring: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Z-index */

    /* ── Darkroom palette ──────────────────────────────────────────── */

    --whiteH: 40;
    --whiteS: 32%;
    --whiteL: 96%;

    --blackH: 30;
    --blackS: 22%;
    --blackL: 6%;

    /* Amber safelight — the one accent color, used with intent. */
    --brand-primaryH: 36;
    --brand-primaryS: 92%;
    --brand-primaryL: 58%;

    --brand-secondaryH: 6;
    --brand-secondaryS: 68%;
    --brand-secondaryL: 56%;

    --greenS: 45%;

    --yellowS: 80%;
    --yellowL: 55%;

    --redH: var(--brand-secondaryH);
    --redS: var(--brand-secondaryS);
    --redL: var(--brand-secondaryL);

    --warningH: var(--yellowH);
    --warningS: var(--yellowS);
    --warningL: var(--yellowL);

    /* Stage: near-black, warm undertone so it isn't a cold blue-black. */
    --backgroundH: var(--blackH);
    --backgroundS: var(--blackS);
    --backgroundL: var(--blackL);

    /* Cards, tiles, input fields — one step up from the stage. */
    --surfaceH: 30;
    --surfaceS: 16%;
    --surfaceL: 12%;

    /* A second elevation for things sitting on a surface (chips on cards). */
    --surface2H: 30;
    --surface2S: 14%;
    --surface2L: 17%;

    --bodyH: var(--whiteH);
    --bodyS: 14%;
    --bodyL: 85%;

    --headingH: var(--whiteH);
    --headingS: var(--whiteS);
    --headingL: var(--whiteL);

    --secondaryH: 34;
    --secondaryS: 10%;
    --secondaryL: 56%;

    --primaryH: var(--brand-primaryH);
    --primaryS: var(--brand-primaryS);
    --primaryL: var(--brand-primaryL);

    --borderH: 32;
    --borderS: 14%;
    --borderL: 22%;

    --border-lightH: 32;
    --border-lightS: 14%;
    --border-lightL: 16%;

    --surface: hsl(var(--surfaceH) var(--surfaceS) var(--surfaceL));
    --surface2: hsl(var(--surface2H) var(--surface2S) var(--surface2L));
    --brand: hsl(var(--brand-primaryH) var(--brand-primaryS) var(--brand-primaryL));
    --brand-ink: hsl(var(--blackH) var(--blackS) 10%);

    color-scheme: dark;
  }

  :root {
    --header-height: 52px;
    --footer-height: 64px;
    --main-padding: 0;
  }
}