/*
 * Tender in Nepal — design tokens
 *
 * Colours come straight from the logo: cobalt #155EEF is the primary colour,
 * navy #101828 is the ink, and the greys belong to the same family as that navy.
 * Backgrounds are white.
 *
 * Two layers:
 *   1. Primitives (--gray-*, --blue-*)  raw values, used only in this file
 *   2. Semantic   (--color-*, --status-*)           what components consume
 *
 * Semantic colours are defined twice: plain light values (the default, and the fallback
 * for older browsers), then light-dark(light, dark) inside @supports for browsers that
 * can do dark mode. Those follow the OS theme; force one with <html data-theme="light">
 * or <html data-theme="dark">.
 *
 * Breakpoints (not usable in @media as variables; listed for reference):
 *   sm 640px · md 768px · lg 1024px · xl 1280px
 */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Source Sans 3";
  src: url("./fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("./fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("./fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("./fonts/noto-sans-devanagari-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC,
    U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

:root {
  color-scheme: light;

  /* ── Primitives: gray (cool neutral; 900 is the logo navy #101828) ─── */
  --gray-0: #ffffff;
  --gray-25: #fcfcfd;
  --gray-50: #f9fafb;
  --gray-100: #f2f4f7;
  --gray-200: #eaecf0;
  --gray-300: #d0d5dd;
  --gray-400: #98a2b3;
  --gray-500: #667085;
  --gray-600: #475467;
  --gray-700: #344054;
  --gray-800: #1d2939;
  --gray-850: #182230;
  --gray-900: #101828; /* logo navy */
  --gray-950: #0c111d;

  /* ── Primitives: blue (600 is the logo cobalt #155EEF) ────────────── */
  --blue-25: #f5f8ff;
  --blue-50: #eff4ff;
  --blue-100: #d1e0ff;
  --blue-200: #b2ccff;
  --blue-300: #84adff;
  --blue-400: #528bff;
  --blue-500: #2970ff;
  --blue-600: #155eef; /* logo cobalt */
  --blue-700: #004eeb;
  --blue-800: #0040c1;
  --blue-900: #00359e;

  /* ── Typography ────────────────────────────────────────────────────── */
  --font-sans: "Source Sans 3", "Noto Sans Devanagari", ui-sans-serif, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Headings: a newspaper serif, since every listing starts life in print. */
  --font-serif: "Source Serif 4", "Noto Sans Devanagari", Georgia, "Times New Roman", serif;
  /* Notice titles and office names stay in their source language (usually Nepali). */
  --font-source: "Noto Sans Devanagari", "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.8125rem; /* 13 */
  --text-sm: 0.9375rem; /* 15 */
  --text-md: 1.0625rem; /* 17 — Source Sans runs small; 17 reads like 16 elsewhere */
  --text-lg: 1.1875rem; /* 19 */
  --text-xl: 1.375rem; /* 22 */
  --text-2xl: 1.75rem; /* 28 */
  --text-3xl: 2.125rem; /* 34 */
  --text-4xl: 2.75rem; /* 44 */

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-source: 1.7; /* Devanagari needs room above and below the headline */

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

  /* ── Space (4px base) ──────────────────────────────────────────────── */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Shape: square-ish. Rounding is kept small on purpose. ─────────── */
  --radius-xs: 2px;
  --radius-sm: 3px; /* labels, chips */
  --radius-md: 4px; /* buttons, inputs */
  --radius-lg: 6px; /* panels */

  --control-height-sm: 2.25rem; /* 36 */
  --control-height-md: 2.75rem; /* 44 — minimum touch target */
  --control-height-lg: 3.25rem; /* 52 */

  /* ── Layout ────────────────────────────────────────────────────────── */
  --container-lg: 64rem;
  --container-xl: 78rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-height: 4rem;

  /* ── Motion: short and plain ───────────────────────────────────────── */
  --duration-fast: 100ms;
  --duration-base: 160ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ── z-index ───────────────────────────────────────────────────────── */
  --z-sticky: 20;
  --z-dropdown: 40;
  --z-modal: 60;

  /* ── Semantic colour (light theme) ──────────────────────────────────
     These plain values are also the fallback for browsers without light-dark():
     they always get the complete light theme. Dark values live in @supports below. */
  --color-bg: var(--gray-0);
  --color-surface: var(--gray-0);
  --color-surface-sunken: var(--gray-50);
  --color-surface-raised: var(--gray-0);
  --color-overlay: rgb(16 24 40 / 0.55);

  --color-text: var(--gray-900);
  --color-text-secondary: var(--gray-700);
  --color-text-muted: var(--gray-600);
  --color-text-disabled: var(--gray-400);
  --color-text-on-primary: #ffffff;
  --color-text-link: var(--blue-700);
  --color-text-link-hover: var(--blue-800);

  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-border-control: var(--gray-500);

  /* Primary: the logo cobalt — main action, active filters, current page, focus. */
  --color-primary: var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-primary-subtle: var(--blue-50);
  --color-primary-subtle-border: var(--blue-200);
  --color-primary-text: var(--blue-700);

  /* Ink: the logo navy, solid — "open this notice". Inverts in dark mode. */
  --color-ink: var(--gray-900);
  --color-ink-hover: var(--gray-800);
  --color-text-on-ink: #ffffff;

  --color-focus-ring: var(--blue-500);
  --color-danger: #b42318;
  --color-danger-subtle: #fef3f2;

  /* Evidence: a neutral grey desk so the white newspaper sheet stands out. */
  --color-evidence-backdrop: var(--gray-100);
  --color-evidence-paper: #ffffff;

  /* Lifecycle status — muted; always paired with a text label. */
  --status-open-bg: #ecfdf3;
  --status-open-fg: #027a48;
  --status-open-line: #12b76a;
  --status-closing-bg: #fffaeb;
  --status-closing-fg: #b54708;
  --status-closing-line: #f79009;
  --status-amended-bg: #f4f3ff;
  --status-amended-fg: #5925dc;
  --status-amended-line: #7a5af8;
  --status-extended-bg: #f0fdf9;
  --status-extended-fg: #107569;
  --status-extended-line: #15b79e;
  --status-cancelled-bg: #fef3f2;
  --status-cancelled-fg: #b42318;
  --status-cancelled-line: #f04438;
  --status-closed-bg: var(--gray-100);
  --status-closed-fg: var(--gray-600);
  --status-closed-line: var(--gray-400);
  --status-awarded-bg: var(--blue-50);
  --status-awarded-fg: var(--blue-800);
  --status-awarded-line: var(--blue-600);

  /* Shadows are rare: menus and the evidence sheet only. */
  --shadow-sheet: 0 1px 3px rgb(16 24 40 / 0.12);
  --shadow-menu: 0 8px 24px -6px rgb(16 24 40 / 0.16);
}

/* ── Dark theme ──────────────────────────────────────────────────────────
 * Only browsers that support light-dark() (Chrome 123+, Safari 17.5+, Firefox 120+)
 * enter this block. Each value is light-dark(light, dark); the light half must match
 * the value above. Older browsers skip the whole block and stay light, including
 * native form controls and scrollbars (color-scheme stays "light" for them).
 */
@supports (color: light-dark(#000, #fff)) {
  :root {
    color-scheme: light dark;
    --color-bg: light-dark(var(--gray-0), var(--gray-950));
    --color-surface: light-dark(var(--gray-0), var(--gray-900));
    --color-surface-sunken: light-dark(var(--gray-50), #0a0e18);
    --color-surface-raised: light-dark(var(--gray-0), var(--gray-850));
    --color-overlay: light-dark(rgb(16 24 40 / 0.55), rgb(0 0 0 / 0.7));
    --color-text: light-dark(var(--gray-900), #f5f6f8);
    --color-text-secondary: light-dark(var(--gray-700), var(--gray-300));
    --color-text-muted: light-dark(var(--gray-600), var(--gray-400));
    --color-text-disabled: light-dark(var(--gray-400), var(--gray-600));
    --color-text-link: light-dark(var(--blue-700), var(--blue-300));
    --color-text-link-hover: light-dark(var(--blue-800), var(--blue-200));
    --color-border: light-dark(var(--gray-200), var(--gray-800));
    --color-border-strong: light-dark(var(--gray-300), var(--gray-700));
    --color-border-control: light-dark(var(--gray-500), var(--gray-500));
    --color-primary-subtle: light-dark(var(--blue-50), rgb(41 112 255 / 0.16));
    --color-primary-subtle-border: light-dark(var(--blue-200), rgb(82 139 255 / 0.4));
    --color-primary-text: light-dark(var(--blue-700), var(--blue-300));
    --color-ink: light-dark(var(--gray-900), var(--gray-100));
    --color-ink-hover: light-dark(var(--gray-800), #ffffff);
    --color-text-on-ink: light-dark(#ffffff, var(--gray-900));
    --color-focus-ring: light-dark(var(--blue-500), var(--blue-400));
    --color-danger: light-dark(#b42318, #fda29b);
    --color-danger-subtle: light-dark(#fef3f2, rgb(240 68 56 / 0.16));
    --color-evidence-backdrop: light-dark(var(--gray-100), #070a12);
    --status-open-bg: light-dark(#ecfdf3, rgb(18 183 106 / 0.16));
    --status-open-fg: light-dark(#027a48, #6ce9a6);
    --status-closing-bg: light-dark(#fffaeb, rgb(247 144 9 / 0.16));
    --status-closing-fg: light-dark(#b54708, #fec84b);
    --status-amended-bg: light-dark(#f4f3ff, rgb(122 90 248 / 0.2));
    --status-amended-fg: light-dark(#5925dc, #bdb4fe);
    --status-extended-bg: light-dark(#f0fdf9, rgb(21 183 158 / 0.16));
    --status-extended-fg: light-dark(#107569, #5fe9d0);
    --status-cancelled-bg: light-dark(#fef3f2, rgb(240 68 56 / 0.16));
    --status-cancelled-fg: light-dark(#b42318, #fda29b);
    --status-closed-bg: light-dark(var(--gray-100), rgb(152 162 179 / 0.16));
    --status-closed-fg: light-dark(var(--gray-600), var(--gray-300));
    --status-awarded-bg: light-dark(var(--blue-50), rgb(41 112 255 / 0.2));
    --status-awarded-fg: light-dark(var(--blue-800), var(--blue-200));
    --shadow-sheet: light-dark(0 1px 3px rgb(16 24 40 / 0.12), 0 1px 3px rgb(0 0 0 / 0.5));
    --shadow-menu: light-dark(0 8px 24px -6px rgb(16 24 40 / 0.16), 0 8px 24px -6px rgb(0 0 0 / 0.6));
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
}