/**
 * 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 */
    --font-family-base: sn-pro, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      sans-serif;
    --font-family-mono: 'SF Mono', Monaco, 'Inconsolata', monospace;

    /* Font size — match Inro's heading ladder (h1/h2 = 2rem) */
    --f1: 2rem;
    --f2: 1.66rem;
    --f3: 1.45rem;
    --f5: 1.125rem;
    --f6: 1rem;
    --f7: 0.875rem;
    --f8: 0.75rem;

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

    /* Font weight — sn-pro is at its best a bit lighter than usual */
    --fw-thin: 300;

    /* Line height */
    --lh-tight: 1.3;
    --lh-base: 1.6;

    /* Border radius — Inro is flatter than climb */
    --br-sm: 3px;
    --br-base: 5px;
    --br-lg: 10px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-base: 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);

    /* Transitions */
    --transition-fast: 0.10s ease-out;
    --transition-base: 0.18s ease-out;

    /* Z-index */
    --z-header: 100;
    --z-dock: 400;

    /* ── Color palette (Inro basic-light) ────────────────────────────── */



    --grayH: 210;
    --grayS: 10.8%;
    --grayL: 90%;

    --blueH: 215.8;
    --blueS: 98.4%;
    --blueL: 52.2%;

    --greenH: 152.2;
    --greenS: 68.8%;
    --greenL: 31.4%;

    --yellowS: 100%;
    --yellowL: 51.4%;

    --orangeH: 27.3;
    --orangeS: 98.3%;
    --orangeL: 53.5%;

    --redH: 354.3;
    --redS: 70.5%;
    --redL: 53.5%;

    --purpleH: 261.3;
    --purpleS: 50.6%;
    --purpleL: 50.8%;

    /* Semantic — point named tokens at palette entries.
       Declaring the neutrals here out-ranks the framework's own dark block
       (it lives in the lower `base-theme` layer), so this file has to supply
       dark itself — see the block at the end and spec §6.5.5. */
    --backgroundH: var(--whiteH);
    --backgroundS: var(--whiteS);
    --backgroundL: var(--whiteL);

    --bodyH: var(--blackH);
    --bodyS: var(--blackS);
    --bodyL: var(--blackL);

    --secondaryH: var(--grayH);
    --secondaryS: var(--grayS);
    --secondaryL: var(--grayL);

    --primaryL: var(--blueL);


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


    --borderH: var(--blackH);
    --borderS: var(--blackS);
    --borderL: 85%;

    /* Resolved colors */
    --background: hsl(var(--backgroundH), var(--backgroundS), var(--backgroundL));
    --body: hsl(var(--bodyH), var(--bodyS), var(--bodyL));
    --body-dull: hsla(var(--bodyH), var(--bodyS), var(--bodyL), 0.3);
    --secondary: hsl(var(--secondaryH), var(--secondaryS), var(--secondaryL));
    --secondary-bg: var(--background);
    --secondary-dull: hsla(var(--secondaryH), var(--secondaryS), var(--secondaryL), 0.3);
    --secondary-muted: hsla(var(--secondaryH), var(--secondaryS), var(--secondaryL), 0.5);
    --primary: hsl(var(--primaryH), var(--primaryS), var(--primaryL));
    --primary-dull: hsla(var(--primaryH), var(--primaryS), var(--primaryL), 0.15);
    --error: hsl(var(--errorH), var(--errorS), var(--errorL));
    --success: hsl(var(--successH), var(--successS), var(--successL));
    --border: hsl(var(--borderH), var(--borderS), var(--borderL));
    --muted: hsla(var(--bodyH), var(--bodyS), var(--bodyL), 0.6);

    /* Layout */
    --dock-height: 4.5rem;
  }

  /* ── Reset / globals ──────────────────────────────────────────────── */

  html {
    background-color: var(--background);
    color: var(--body);
    font-family: var(--font-family-base);
    font-size: 16px;
    font-weight: var(--fw-normal);
  }
}

/*
 * Dark mode.
 *
 * Two selectors, because there are three states. `prefers-color-scheme`
 * covers "follow the device" and is guarded by `:not([data-theme])` so an
 * explicit choice wins in both directions; `[data-theme='dark']` covers the
 * user picking dark on a light device. `modules/theme.ts` in `@civility/ui`
 * sets that attribute, and the inline script in `index.html` applies it
 * before first paint so there is no flash of the wrong theme.
 *
 * Only the neutrals move. The brand ramp (purple, and the semantic colours
 * derived from it) keeps its light-mode lightness deliberately — the
 * framework does the same, and it keeps accent colours recognisable rather
 * than washed out.
 */
@layer theme {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --backgroundH: var(--grayH);
      --backgroundS: 14%;
      --backgroundL: 11%;

      --bodyH: 0;
      --bodyS: 0%;
      --bodyL: 92%;

      --secondaryH: var(--grayH);
      --secondaryS: 14%;
      --secondaryL: 65%;

      --primaryL: 66%;
      --borderL: 28%;
    }
  }

  :root[data-theme='dark'] {
    --backgroundH: var(--grayH);
    --backgroundS: 14%;
    --backgroundL: 11%;

    --bodyH: 0;
    --bodyS: 0%;
    --bodyL: 92%;

    --secondaryH: var(--grayH);
    --secondaryS: 14%;
    --secondaryL: 65%;

    --primaryL: 66%;
    --borderL: 28%;
  }
}