/* ==========================================================================
   Ulgama design tokens · v2.0 "The Registry" · October 17, 2026
   Drop-in replacement for tokens.css 1.1. Every custom property keeps its
   name, so templates and components.css keep working. New names are marked.

   Colour: bound ink on bone paper. Registrar blue is the only colour that
   means "you can act here". The four signals are unchanged. Every text
   pair states its WCAG 2.x contrast ratio (AA: 4.5 text, 3 controls).

   Rules that keep it calm (unchanged from 1.1):
   - --brand is the only action colour. The logo is printed in --logo.
   - Signal colours appear only in text, icons and small tags.
   - Green (moss) means "current" and nothing else.
   - Nothing is said by colour alone: every status has an icon and a word.
   ========================================================================== */

/* --- Fonts: two families, both SIL Open Font License 1.1, self-hosted ----- */
/* Atkinson Hyperlegible Next: everything people read and tap.             */
@font-face {
  font-family: "Ulgama Sans";
  src: url("fonts/AtkinsonHyperlegibleNext-Variable.121520b68f71.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ulgama Sans";
  src: url("fonts/AtkinsonHyperlegibleNext-Italic-Variable.19c2e75fb89f.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
/* EB Garamond: titles, dates, the one big number. Never below 17px.        */
/* Variable woff2 (wght 400–800), © The EB Garamond Project Authors, OFL.   */
@font-face {
  font-family: "Ulgama Serif";
  src: url("fonts/EBGaramond-Variable.4124e11482b4.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ulgama Serif";
  src: url("fonts/EBGaramond-Italic-Variable.0dd5233c9d0e.woff2") format("woff2");
  font-weight: 400 800; font-style: italic; font-display: swap;
}

/* --- Light (default) ------------------------------------------------------ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --paper: #F3EEE2;            /* page: bone. ink on it 15.0 */
  --paper-2: #E9E3D4;          /* the tinted margin column, hovered rows: ink 13.6, ink-2 5.4 */
  --card: #FBF9F4;             /* sheets: cards, rows, fields. ink 16.5 */
  --hairline: #DAD3C3;         /* rules, card edges (decorative) */
  --control-border: #8F887A;   /* fields, secondary buttons: 3.2 on card */
  --shell: #1B1A17;            /* NEW · sidebar, tab bar, app header */
  --shell-2: #26241F;          /* NEW · hovered item, search field in the shell */
  --shell-hairline: #34312B;   /* NEW */
  --on-shell: #EFE9DC;         /* NEW · text in the shell: 14.4 */
  --on-shell-2: #A8A193;       /* NEW · muted text and icons in the shell: 6.8 */

  /* Text and logo */
  --ink: #1B1A17;              /* body: 15.0 on paper, 16.5 on card */
  --ink-2: #5E5A52;            /* meta, captions: 5.9 on paper, 6.5 on card */
  --logo: #1B1A17;

  /* Registrar blue: links, primary button, focus, selection, current item */
  --brand: #2F4B9E;            /* 7.1 on paper, 7.6 on card */
  --brand-pressed: #233A7D;    /* 10.2 on card */
  --brand-tint: #E2E7F3;       /* selected row, hovered secondary button: brand on it 6.6 */
  --on-brand: #FFFFFF;         /* 8.0 on brand */

  /* Signals: text colour + tag tint. On card / on its tint */
  --brick: #9A2F28;  --brick-tint: #F7E4E0;   /* 6.6 / 6.1 · missing, expired, critical */
  --amber: #7A4E00;  --amber-tint: #F7ECD2;   /* 6.5 / 6.1 · expiring, high */
  --plum:  #6A3E86;  --plum-tint:  #EFE4F3;   /* 6.9 / 6.5 · needs review, medium */
  --moss:  #2B6A3A;  --moss-tint:  #E1EEE3;   /* 5.8 / 5.4 · current, done */
  --grey:  #5E5A52;  --grey-tint:  #E9E3D4;   /* 6.5 / 5.4 · off, not applicable, low */

  /* States */
  --disabled-bg: #B9B1A1;      /* disabled primary: card text on it 2.9, read as disabled by its label */
  --disabled-ink: #FBF9F4;
  --overlay: rgb(27 26 23 / 0.55);
  --toast-bg: #1B1A17;
  --toast-ink: #F3EEE2;
  --toast-mark: #8FCB9B;       /* NEW · the check in a "Marked done" toast: moss for an ink toast */
  --shadow-overlay: 0 1px 2px rgb(27 26 23 / 0.10), 0 12px 32px rgb(27 26 23 / 0.18);
}

/* --- Dark: same roles, measured in the dark-mode sheet ---------------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141311;
  --paper-2: #26241F;          /* ink-2 on it 6.0 */
  --card: #1F1D19;
  --hairline: #3A3730;
  --control-border: #6B655A;   /* 2.9 on card: edge only, labels carry the meaning */
  --shell: #0E0D0B;
  --shell-2: #1F1D19;
  --shell-hairline: #3A3730;
  --on-shell: #EFE9DC;
  --on-shell-2: #A8A193;
  --ink: #EFE9DC;              /* 15.4 on paper, 13.9 on card */
  --ink-2: #A8A193;            /* 7.2 on paper, 6.6 on card */
  --logo: #EFE9DC;
  --brand: #9FB3EA;            /* 8.1 on card */
  --brand-pressed: #C3D0F3;
  --brand-tint: #1E2A4A;       /* brand on it 6.4 */
  --on-brand: #141311;         /* 8.9 on brand */
  --brick: #F2A79F;  --brick-tint: #3B1A17;   /* 8.7 / 8.0 */
  --amber: #E8B75A;  --amber-tint: #3A2A08;   /* 9.1 / 7.5 */
  --plum:  #CDA9E0;  --plum-tint:  #2E1F38;   /* 7.8 / 7.6 */
  --moss:  #8FCB9B;  --moss-tint:  #17301E;   /* 8.5 / 7.6 */
  --grey:  #A8A193;  --grey-tint:  #26241F;   /* 6.6 / 6.0 */
  --disabled-bg: #4A463E;
  --disabled-ink: #A8A193;
  --overlay: rgb(0 0 0 / 0.65);
  --toast-bg: #EFE9DC;
  --toast-ink: #141311;
  --toast-mark: #2B6A3A;
  --shadow-overlay: 0 0 0 1px #3A3730, 0 12px 32px rgb(0 0 0 / 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #141311; --paper-2: #26241F; --card: #1F1D19; --hairline: #3A3730; --control-border: #6B655A;
    --shell: #0E0D0B; --shell-2: #1F1D19; --shell-hairline: #3A3730; --on-shell: #EFE9DC; --on-shell-2: #A8A193;
    --ink: #EFE9DC; --ink-2: #A8A193; --logo: #EFE9DC;
    --brand: #9FB3EA; --brand-pressed: #C3D0F3; --brand-tint: #1E2A4A; --on-brand: #141311;
    --brick: #F2A79F; --brick-tint: #3B1A17; --amber: #E8B75A; --amber-tint: #3A2A08;
    --plum: #CDA9E0; --plum-tint: #2E1F38; --moss: #8FCB9B; --moss-tint: #17301E; --grey: #A8A193; --grey-tint: #26241F;
    --disabled-bg: #4A463E; --disabled-ink: #A8A193; --overlay: rgb(0 0 0 / 0.65);
    --toast-bg: #EFE9DC; --toast-ink: #141311; --toast-mark: #2B6A3A; --shadow-overlay: 0 0 0 1px #3A3730, 0 12px 32px rgb(0 0 0 / 0.55);
  }
}

/* --- Everything that does not change with the theme ------------------------ */
:root {
  --font-sans: "Ulgama Sans", "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Ulgama Serif", "EB Garamond", Georgia, "Times New Roman", serif;   /* NEW */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale. Sans sizes unchanged; serif sizes are NEW and never below 17px. */
  --text-sm: 0.875rem;    /* 15 · meta, tags */
  --text-md: 1rem;        /* 17 · body, fields, buttons */
  --text-lg: 1.0625rem;   /* 18 · card titles (sans, 600) */
  --text-xl: 1.647rem;    /* 28 · h2, serif 500 */
  --text-2xl: 2.824rem;   /* 48 · h1, serif 500, tracking -0.01em */
  --text-3xl: 4.235rem;   /* 72 · the one big number, serif, tracking -0.02em */
  --text-date: 1.412rem;  /* 24 · the italic date beside h1 */
  --text-stamp: 1.765rem; /* 30 · the day in a date stamp */
  --text-logo: 2.1rem;    /* 36 · the wordmark on the sign-in cover */

  --leading-tight: 1.15;
  --leading-body: 1.5;
  --weight-regular: 400;
  --weight-strong: 600;
  --weight-serif: 500;    /* NEW · serif titles */
  --measure: 66ch;

  /* Space, 4px rhythm */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4rem;

  /* Shape: a bound record, not a toy. */
  --radius-sm: 3px;       /* tags, checkboxes, buttons, fields, cards: ONE radius */
  --radius-md: 3px;
  --radius-lg: 12px;      /* phone sheets only */
  --radius-round: 999px;  /* counts, avatars, PIN keys */
  --border: 1px;
  --border-strong: 2px;
  --rule: 2px solid var(--ink);          /* NEW · the double rule under a page title: */
  --rule-2: 1px solid var(--ink);        /*       border-top: var(--rule); border-bottom: var(--rule-2); height 3px */

  --target: max(44px, 2.75rem);
  --focus-width: 2px;
  --focus-gap: 2px;

  --duration-fast: 120ms; --duration: 200ms; --ease: cubic-bezier(0.2, 0, 0, 1);
  --z-sticky: 10; --z-overlay: 100; --z-toast: 200;

  --sidebar-width: 17rem; /* NEW · 272px */
}
@media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration: 0ms; } }

html { font-size: 106.25%; }
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }
  /* Dynamic Type: body and controls follow the system size without limit.
     Serif display sizes are capped so a 48px title at AX5 (x2.35) does not
     become 113px and wrap every word: clamp(floor px, rem, ceiling px). */
  :root {
    --text-2xl: clamp(48px, 2.824rem, 63px);     /* h1 */
    --text-xl:  clamp(28px, 1.647rem, 37px);     /* h2 */
    --text-3xl: clamp(72px, 4.235rem, 90px);     /* big number */
    --text-date: clamp(24px, 1.412rem, 32px);
    --text-stamp: clamp(30px, 1.765rem, 39px);
    --text-logo: clamp(36px, 2.1rem, 48px);
    /* The wide gaps and page margins stop at about 1.5 times their size, so at AX sizes the
       width goes to the words (T-18: at AX5 a 1.5rem margin is 80px a side on a 402px phone). */
    --space-4: clamp(16px, 1rem, 24px);
    --space-5: clamp(24px, 1.5rem, 36px);
    --space-6: clamp(32px, 2rem, 48px);
    --space-7: clamp(48px, 3rem, 72px);
    --space-8: clamp(64px, 4rem, 96px);
  }
}