/* ==========================================================================
   Sayohatchi design tokens
   --------------------------------------------------------------------------
   Ported verbatim from the redesign handoff's design_system/tokens/*.css
   (fonts, colors, typography, spacing, shape, motion). Names and values are
   the specification — do NOT rename, round, or snap anything here to a 4/8pt
   grid. The odd numbers (9px gaps, 12.5px labels, 11px radii) are deliberate.

   Load order per page: reset.css -> sayohatchi-tokens.css -> sayohatchi-ds.css
   -> page css. While the legacy systems still coexist on a page, these tokens
   must come AFTER theme.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   fonts
   Type pairing chosen for this system, both SIL OFL:
     Plus Jakarta Sans — display + UI. Tall x-height and open apertures keep
       12.5px labels legible at this density; weight 800 carries headlines,
       so no separate display face is needed.
     IBM Plex Mono — eyebrows, case IDs, timestamps, money. Tabular figures
       align columns without extra CSS.
   Full Latin Extended coverage, so Uzbek diacritics render correctly.

   Self-hosted (the handoff shipped a Google Fonts @import; production hosts
   the woff2 locally). Plus Jakarta Sans is a variable font, so one file per
   subset covers the whole 400–800 range. Licenses: fonts/*/OFL.txt.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans/PlusJakartaSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans/PlusJakartaSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono/IBMPlexMono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono/IBMPlexMono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono/IBMPlexMono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono/IBMPlexMono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono/IBMPlexMono-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibm-plex-mono/IBMPlexMono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ======================================================================
     colors
     ====================================================================== */

  /* ---- Green: the brand spine. Ink is near-black green, never pure black. ---- */
  --green-900: #0F2E26; /* ink, dark panels, case header */
  --green-700: #0A5138; /* primary action, active nav, links */
  --green-100: #E3F4E8; /* success wash */
  --green-050: #F4F9F5; /* selected-option wash */

  /* ---- Lime: reserved accent. Progress fill and one lime CTA per dark panel. ---- */
  --lime-500: #B7EA3C;
  --lime-200: #D8E9B4;
  --lime-050: #FBFEF4;

  /* ---- Neutrals: warm-grey greens, never blue-grey ---- */
  --neutral-000: #FFFFFF;
  --neutral-025: #F7F9F8; /* mobile canvas */
  --neutral-050: #F5F7F5; /* desktop canvas, table head */
  --neutral-075: #F0F3F1; /* inactive chip, avatar plate */
  --neutral-100: #EDF0EE; /* skeleton block */
  --neutral-150: #E9EDEB; /* doc-viewer plate */
  --neutral-200: #E4E8E6; /* default border */
  --neutral-250: #DDE3E0; /* control border on dark-ish, empty step */
  --neutral-300: #C9D3CF; /* dashed border */
  --neutral-350: #A8B4B0; /* faint text, mono meta */
  --neutral-500: #8B9A95; /* secondary text */
  --neutral-700: #5C6F69; /* body text */
  --divider: #EEF1EF;     /* row divider inside cards */
  --divider-soft: #F3F5F4;

  /* ---- Amber: needs replacing / attention. Never used for "error". ---- */
  --amber-700: #9A6410;
  --amber-500: #E8B84B;
  --amber-100: #FDF0DC;
  --amber-050: #FFFBF4; /* attention row background */

  /* ---- Red: refusal and overdue only. Small doses, no red banners. ---- */
  --red-700: #B9453A;
  --red-300: #EDC8C2;
  --red-100: #FBE9E6;
  --red-on-dark: #F1A9A0;

  /* ---- Blue: external waiting (embassy). Informational, never actionable. ---- */
  --blue-700: #3A5A8C;
  --blue-100: #E7EDF6;

  /* ---- Semantic aliases: reach for these first ---- */
  --text-strong: var(--green-900);
  --text-body: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-faint: var(--neutral-350);
  --text-on-dark: var(--neutral-000);
  --text-on-dark-muted: rgba(255, 255, 255, 0.6);
  --text-on-dark-faint: rgba(255, 255, 255, 0.5);
  --text-accent: var(--green-700);

  --surface-canvas: var(--neutral-050);
  --surface-canvas-mobile: var(--neutral-025);
  --surface-card: var(--neutral-000);
  --surface-sunken: var(--neutral-050);
  --surface-plate: var(--neutral-150);
  --surface-dark: var(--green-900);
  --surface-attention: var(--amber-050);
  --surface-selected: var(--green-050);
  --surface-on-dark: rgba(255, 255, 255, 0.07);

  --border-default: var(--neutral-200);
  --border-strong: var(--green-700);
  --border-dashed: var(--neutral-300);
  --border-on-dark: rgba(255, 255, 255, 0.18);
  --border-attention: var(--amber-500);
  --border-danger: var(--red-300);
  --border-accent: var(--lime-200);

  --action-primary: var(--green-700);
  --action-primary-text: var(--neutral-000);
  --action-accent: var(--lime-500);
  --action-accent-text: var(--green-900);
  --action-quiet-text: var(--neutral-700);
  --action-danger-text: var(--red-700);

  --status-ok-bg: var(--green-100);
  --status-ok-text: var(--green-700);
  --status-attention-bg: var(--amber-100);
  --status-attention-text: var(--amber-700);
  --status-danger-bg: var(--red-100);
  --status-danger-text: var(--red-700);
  --status-neutral-bg: var(--neutral-075);
  --status-neutral-text: var(--neutral-700);
  --status-external-bg: var(--blue-100);
  --status-external-text: var(--blue-700);

  --progress-track: var(--neutral-200);
  --progress-fill: var(--lime-500);
  --progress-fill-done: var(--green-700);
  --progress-fill-mid: var(--amber-500);
  --progress-track-on-dark: rgba(255, 255, 255, 0.18);

  --link: var(--green-700);
  --link-hover: var(--green-900);

  /* ======================================================================
     typography
     ====================================================================== */
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* Display — audit headlines, hero statements. Always 800, tight tracking. */
  --type-display-1: var(--weight-black) 40px / 1.05 var(--font-sans);
  --type-display-2: var(--weight-black) 36px / 1.1 var(--font-sans);
  --type-display-3: var(--weight-black) 30px / 1.1 var(--font-sans);
  --tracking-display: -0.02em;

  /* Headings — page titles, panel titles, card titles */
  --type-title-1: var(--weight-black) 27px / 1.1 var(--font-sans);
  --type-title-2: var(--weight-black) 22px / 1.15 var(--font-sans);
  --type-title-3: var(--weight-bold) 16px / 1.2 var(--font-sans);
  --type-title-4: var(--weight-bold) 14.5px / 1.2 var(--font-sans);
  --tracking-title: -0.015em;

  /* Body */
  --type-body-lg: var(--weight-regular) 15.5px / 1.55 var(--font-sans);
  --type-body: var(--weight-regular) 13.5px / 1.55 var(--font-sans);
  --type-body-sm: var(--weight-regular) 12.5px / 1.5 var(--font-sans);

  /* UI labels — the workhorse. 11.5–13.5px, 600/700. */
  --type-label-lg: var(--weight-bold) 13.5px / 1.2 var(--font-sans);
  --type-label: var(--weight-semibold) 12.5px / 1 var(--font-sans);
  --type-label-sm: var(--weight-semibold) 11.5px / 1 var(--font-sans);

  /* Mono — eyebrows, case IDs, timestamps, metrics. Uppercase + wide tracking. */
  --type-eyebrow: var(--weight-medium) 10.5px / 1 var(--font-mono);
  --type-eyebrow-sm: var(--weight-medium) 9.5px / 1 var(--font-mono);
  --type-mono-head: var(--weight-semibold) 10px / 1 var(--font-mono);
  --type-mono-data: var(--weight-semibold) 12px / 1 var(--font-mono);
  --type-metric: var(--weight-black) 32px / 1 var(--font-sans);
  --type-metric-sm: var(--weight-black) 18px / 1 var(--font-sans);

  --tracking-eyebrow: 0.13em;
  --tracking-mono-head: 0.11em;

  /* ======================================================================
     spacing
     Not a strict 4pt grid — the system uses odd values deliberately
     (9px gaps, 13px padding, 11px radii). Copy the value, don't snap it.
     ====================================================================== */
  --space-1: 3px;
  --space-2: 5px;
  --space-3: 7px;
  --space-4: 9px;
  --space-5: 11px;
  --space-6: 13px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 18px;
  --space-10: 20px;
  --space-11: 22px;
  --space-12: 26px;
  --space-13: 28px;
  --space-14: 34px;

  /* Recurring composites */
  --pad-card: 18px 20px;      /* standard white card */
  --pad-card-lg: 22px 26px;   /* dark case header, hero card */
  --pad-row: 14px 18px;       /* table row */
  --pad-row-tight: 13px 18px;
  --pad-chip: 4px 9px;        /* status badge */
  --pad-filter: 7px 12px;     /* filter chip */
  --pad-button: 10px 18px;
  --pad-button-lg: 15px;      /* full-width mobile CTA */
  --pad-topbar: 11px 20px;
  --pad-page: 24px 26px;

  --gap-card: 12px;   /* between sibling cards */
  --gap-field: 9px;   /* inside a card, between rows */
  --gap-inline: 8px;  /* icon-to-label, chip-to-chip */
  --gap-table: 16px;

  --nav-width: 196px;
  --nav-width-agency: 188px;
  --rail-width: 320px;
  --list-width: 392px;
  --page-max: 820px;   /* client portal reading column */
  --phone-width: 375px;

  /* ======================================================================
     shape
     Radii scale with the element: chips small, cards medium, phones huge.
     Nothing is fully pill-shaped except the progress fills.
     ====================================================================== */
  --radius-chip: 7px;
  --radius-control: 9px;
  --radius-button: 11px;
  --radius-button-lg: 13px;
  --radius-avatar: 10px;
  --radius-card: 14px;
  --radius-card-lg: 16px;
  --radius-panel: 18px;
  --radius-phone: 30px;
  --radius-bar: 3px;
  --radius-bar-lg: 4px;

  --border-width: 1px;
  --border-width-selected: 1.5px;
  --border-width-dashed: 1.5px;

  /* Elevation is nearly absent: borders do the work. Three shadows only. */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-lifted: 0 6px 18px rgba(15, 46, 38, 0.18);
  --shadow-device: 0 10px 30px rgba(15, 46, 38, 0.09);

  --bar-height: 6px;
  --bar-height-sm: 5px;
  --bar-height-lg: 7px;
  --dot-size: 7px;
  --check-size: 18px;
  --icon-sm: 13px;
  --icon: 15px;
  --icon-lg: 21px;
  --hit-target: 44px; /* mobile minimum */

  /* ======================================================================
     motion
     Motion is functional and short. No bounce, no springs, no entrance
     animations on data. Colour and border changes only.
     ====================================================================== */
  --duration-fast: 120ms;
  --duration: 180ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-control: background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease), color var(--duration) var(--ease);

  /* Hover = one step darker green, or the neutral wash on quiet controls.
     Press = no scale; the darker fill holds. */
  --hover-primary: #084229;
  --hover-accent: #A8DB2E;
  --hover-quiet-bg: var(--neutral-050);
  --hover-row-bg: var(--neutral-025);

  /* ======================================================================
     Legacy aliases
     Surfaces that were NOT redesigned (landing, auth, questionnaire, the
     dashboard redirect shell, workspace) keep their structure and still read
     the older font variables. Pointing those at the system's pairing re-skins
     them without touching a single rule in their sheets.

     There is deliberately no separate display face: Plus Jakarta's 800 weight
     carries the headlines, which is why --font-display resolves to the same
     family rather than to a second one.
     ====================================================================== */
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
}