/* ==========================================================================
   Ulgama design tokens · v1.1 · October 14, 2026
   One file of CSS custom properties. No build step, no framework.
   Drop next to components.css and the fonts/ folder, e.g. /static/ulgama/.

   Colour: vault neutrals (an old ledger's brown-black ink and umber on warm
   paper), one ledger-ink colour for actions, four quiet signal colours.
   Every text pair states its WCAG 2.2 contrast ratio.
   AA needs 4.5:1 for text, 3:1 for controls.

   Rules that keep it calm:
   - Ledger ink (--brand) is the only colour that means "you can act here".
   - The logo is printed in ink (--logo), never in ledger ink.
   - Signal colours appear only in text, icons and small tags. Never a
     coloured banner, header or card.
   - Green (moss) means "current" and nothing else.
   - Nothing is said by colour alone: every status has an icon and a word.
   ========================================================================== */

/* --- Font: Atkinson Hyperlegible Next, SIL Open Font License 1.1 -------- */
/* Self-hosted. Covers every Turkish letter (ğ ı İ ş ç ö ü) in every weight. */
@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;
}

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

  /* Surfaces */
  --paper: #F7F4EC;            /* page background: warm ledger stock */
  --paper-2: #F0EBE0;          /* hovered row, sunken areas: ink on it 13.3 */
  --card: #FFFFFF;             /* cards, panels, table rows, fields */
  --hairline: #E7E0D3;         /* dividers, table rules (decorative) */
  --control-border: #8E8577;   /* field, checkbox, select borders: 3.3 on paper, 3.6 on card */

  /* Text and logo */
  --ink: #2A211B;              /* body text: 14.4 on paper, 15.8 on card */
  --ink-2: #625749;            /* help text, metadata: 6.4 on paper, 7.1 on card */
  --logo: #2A211B;             /* the logo, always ink: 14.4 on paper */

  /* Ledger ink: links, primary button, focus, selection, active tab */
  --brand: #1E4E5C;            /* 8.3 on paper, 9.1 on card */
  --brand-pressed: #163C47;    /* hover and pressed: 10.8 on paper */
  --brand-tint: #E1ECEF;       /* selected row, current nav item: brand on it 7.6 */
  --on-brand: #FFFFFF;         /* text on a primary button: 9.1 */

  /* Signals: text colour + tag tint. Text on paper / on its tint */
  --brick: #9A2F28;            /* missing, expired · critical: 6.8 / 6.3 */
  --brick-tint: #F9E7E4;
  --amber: #7A4E00;            /* expiring · high: 6.6 / 6.3 */
  --amber-tint: #FAEED3;
  --plum: #6A3E86;             /* needs review · medium: 7.2 / 6.6 */
  --plum-tint: #F0E6F5;
  --moss: #2B6A3A;             /* current: 5.9 / 5.5 */
  --moss-tint: #E3F0E5;
  --grey: #625749;             /* switched off, not applicable · low: 6.4 / 5.7 */
  --grey-tint: #ECE6DB;

  /* States */
  --disabled-bg: #EBE5DA;      /* disabled controls keep readable text: ink-2 on it 5.6 */
  --disabled-ink: #625749;
  --overlay: rgb(42 33 27 / 0.45);   /* behind dialogs */
  --toast-bg: #2A211B;         /* toast: paper text on it 14.4 */
  --toast-ink: #F7F4EC;
  --shadow-overlay: 0 1px 3px rgb(42 33 27 / 0.12), 0 8px 24px rgb(42 33 27 / 0.16);
}

/* --- Dark: same roles, only lightness flips -------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1C1915;
  --paper-2: #2E2924;          /* ink on it 11.7 */
  --card: #272320;
  --hairline: #38322B;
  --control-border: #7A7064;   /* 3.6 on paper, 3.2 on card */
  --ink: #EEE7DA;              /* 14.2 on paper, 12.7 on card */
  --ink-2: #BBB09F;            /* 8.2 on paper, 7.3 on card */
  --logo: #EEE7DA;
  --brand: #8EC2D1;            /* 9.0 on paper, 8.0 on card */
  --brand-pressed: #A9D3DF;    /* 10.9 */
  --brand-tint: #1E3A42;       /* brand on it 6.2 */
  --on-brand: #1C1915;         /* 9.0 on brand */
  --brick: #F09A92;  --brick-tint: #43221F;   /* 8.1 / 6.6 */
  --amber: #E6B35C;  --amber-tint: #3F2E10;   /* 9.1 / 6.8 */
  --plum: #CDA8E2;   --plum-tint: #352642;    /* 8.6 / 6.8 */
  --moss: #8FCC9C;   --moss-tint: #1E3A26;    /* 9.4 / 6.7 */
  --grey: #BBB09F;   --grey-tint: #312B25;    /* 8.2 / 6.5 */
  --disabled-bg: #312B25;      /* ink-2 on it 6.5 */
  --disabled-ink: #BBB09F;
  --overlay: rgb(0 0 0 / 0.6);
  --toast-bg: #EEE7DA;         /* dark text on it 14.2 */
  --toast-ink: #1C1915;
  --shadow-overlay: 0 0 0 1px #38322B, 0 8px 24px rgb(0 0 0 / 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #1C1915;
    --paper-2: #2E2924;
    --card: #272320;
    --hairline: #38322B;
    --control-border: #7A7064;
    --ink: #EEE7DA;
    --ink-2: #BBB09F;
    --logo: #EEE7DA;
    --brand: #8EC2D1;
    --brand-pressed: #A9D3DF;
    --brand-tint: #1E3A42;
    --on-brand: #1C1915;
    --brick: #F09A92;  --brick-tint: #43221F;
    --amber: #E6B35C;  --amber-tint: #3F2E10;
    --plum: #CDA8E2;   --plum-tint: #352642;
    --moss: #8FCC9C;   --moss-tint: #1E3A26;
    --grey: #BBB09F;   --grey-tint: #312B25;
    --disabled-bg: #312B25;
    --disabled-ink: #BBB09F;
    --overlay: rgb(0 0 0 / 0.6);
    --toast-bg: #EEE7DA;
    --toast-ink: #1C1915;
    --shadow-overlay: 0 0 0 1px #38322B, 0 8px 24px rgb(0 0 0 / 0.5);
  }
}

/* --- Previous neutrals ("ledger", the first palette), opt-in --------------- */
/* Kept only so earlier comparisons still render. data-palette="ledger" on
   <html> or a wrapper switches the neutrals back to charcoal. Safe to delete. */
[data-palette="ledger"]:not([data-theme="dark"]),
[data-palette="ledger"] [data-theme="light"] {
  --paper: #F7F5F0;
  --paper-2: #F1EEE6;
  --hairline: #E6E2D9;
  --control-border: #8A867D;
  --ink: #1F1E1B;
  --ink-2: #5C5A55;
  --logo: #1F1E1B;
  --grey: #5C5A55;  --grey-tint: #ECE9E1;
  --disabled-bg: #ECE9E1;
  --disabled-ink: #5C5A55;
  --overlay: rgb(31 30 27 / 0.45);
  --toast-bg: #1F1E1B;
  --toast-ink: #F7F5F0;
  --shadow-overlay: 0 1px 3px rgb(31 30 27 / 0.12), 0 8px 24px rgb(31 30 27 / 0.16);
}
[data-palette="ledger"][data-theme="dark"],
[data-palette="ledger"] [data-theme="dark"] {
  --paper: #1A1A17;
  --paper-2: #2A2926;
  --card: #242320;
  --hairline: #34332E;
  --control-border: #75726A;
  --ink: #ECE8DF;
  --ink-2: #B4AFA4;
  --logo: #ECE8DF;
  --on-brand: #1A1A17;
  --grey: #B4AFA4;  --grey-tint: #2E2D29;
  --disabled-bg: #2E2D29;
  --disabled-ink: #B4AFA4;
  --toast-bg: #ECE8DF;
  --toast-ink: #1A1A17;
  --shadow-overlay: 0 0 0 1px #34332E, 0 8px 24px rgb(0 0 0 / 0.5);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="ledger"]:not([data-theme="light"]) {
    --paper: #1A1A17;
    --paper-2: #2A2926;
    --card: #242320;
    --hairline: #34332E;
    --control-border: #75726A;
    --ink: #ECE8DF;
    --ink-2: #B4AFA4;
    --logo: #ECE8DF;
    --on-brand: #1A1A17;
    --grey: #B4AFA4;  --grey-tint: #2E2D29;
    --disabled-bg: #2E2D29;
    --disabled-ink: #B4AFA4;
    --toast-bg: #ECE8DF;
    --toast-ink: #1A1A17;
    --shadow-overlay: 0 0 0 1px #34332E, 0 8px 24px rgb(0 0 0 / 0.5);
  }
}

/* --- Everything that does not change with the theme ------------------------ */
:root {
  /* Type. One family. Sizes in rem so they follow the reader's text size,
     200% zoom and iOS Dynamic Type. 1rem = 17px at default settings. */
  --font-sans: "Ulgama Sans", "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-sm: 0.875rem;    /* 15px · help text, metadata, tags. Nothing smaller. */
  --text-md: 1rem;        /* 17px · body, fields, buttons */
  --text-lg: 1.1875rem;   /* 20px · card titles, lead sentences */
  --text-xl: 1.4375rem;   /* 24px · section headings (h2) */
  --text-2xl: 1.75rem;    /* 30px · page titles (h1) */
  --text-3xl: 2.25rem;    /* 38px · one big number, e.g. the readiness score */

  --leading-tight: 1.2;   /* headings */
  --leading-body: 1.5;    /* body and fields */
  --weight-regular: 400;
  --weight-strong: 600;   /* headings, labels, buttons. 700 is never needed. */
  --measure: 70ch;        /* longest comfortable line of prose */

  /* Space. A 4px rhythm, in rem so it grows with the text. */
  --space-1: 0.25rem;     /* 4 */
  --space-2: 0.5rem;      /* 8 */
  --space-3: 0.75rem;     /* 12 */
  --space-4: 1rem;        /* 16 (17 at default) */
  --space-5: 1.5rem;      /* 24 */
  --space-6: 2rem;        /* 32 */
  --space-7: 3rem;        /* 48 */
  --space-8: 4rem;        /* 64 */

  /* Shape. Modest corners: a ledger, not a toy. */
  --radius-sm: 4px;       /* tags, checkboxes */
  --radius-md: 6px;       /* buttons, fields, cards */
  --radius-lg: 10px;      /* dialogs, phone sheets */
  --radius-round: 999px;  /* counts and avatars only */
  --border: 1px;
  --border-strong: 2px;   /* focused, invalid and selected edges */

  /* Touch. Every control is at least 44 x 44 CSS px. */
  --target: max(44px, 2.75rem);

  /* Focus: ledger ink, 2px, with a 2px gap of the surface behind it. */
  --focus-width: 2px;
  --focus-gap: 2px;

  /* Motion: short and optional. Turned off under reduced motion. */
  --duration-fast: 120ms;
  --duration: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Layers */
  --z-sticky: 10;
  --z-overlay: 100;
  --z-toast: 200;

  /* Breakpoints (for reference: custom properties cannot be used inside
     @media). Use em so they follow zoom:
       phone   < 40em   (680px)
       tablet  40em to 64em
       desktop >= 64em  (1088px)                                           */
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration: 0ms; }
}

/* --- Base size: 17px, and iOS Dynamic Type inside the iPhone app ----------- */
html { font-size: 106.25%; }   /* 17px when the browser default is 16px */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  /* iOS only: follow the system text size (Dynamic Type). */
  html { font: -apple-system-body; }
}