/*
 * tokens.css — the ONLY place for raw design values (colors, fonts, sizes, spacing, radii,
 * shadows, z-index, breakpoints). Every other stylesheet and every template uses these
 * custom properties. Light and dark color sets are both defined here, and the Bootstrap
 * `--bs-*` variables are mapped onto them at the bottom.
 *
 * Contrast of every color pair is measured by `php bin/contrast-report.php`
 * (result: docs/CONTRAST.md). Re-run it after changing any color.
 *
 * Color tokens must stay plain 6-digit hex (the report parses them). `*-rgb` tokens are the
 * same colors as "R, G, B" triplets for Bootstrap's rgba() usage; the report checks they match.
 */

/* ------------------------------------------------------------------ */
/* Theme-independent tokens                                            */
/* ------------------------------------------------------------------ */
:root {
  /* Fonts (@font-face lives in fonts.css; html[data-font="plex"] switches --font-body) */
  --font-sarabun: "Sarabun", "Thonburi", "Leelawadee UI", "Tahoma", system-ui, sans-serif;
  --font-plex: "IBM Plex Sans Thai", "Thonburi", "Leelawadee UI", "Tahoma", system-ui, sans-serif;
  --font-body: var(--font-sarabun);
  /* Codes the owner copies character by character (2FA secret, recovery codes) */
  --font-code: ui-monospace, "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;

  /* Type scale (base 16px). Content the owner must read (field hints, errors, amounts) is
     --fs-base or larger. The smaller sizes below were accepted as exceptions by the owner at the
     1A approval (PLAN 9 decision record): captions/badges 15px, bottom-bar labels and chart axis
     14px, notification counter 12px. */
  --fs-base: 1rem;
  --fs-sm: 0.9375rem;
  --fs-nav: 0.875rem;
  --fs-chart: 0.875rem;
  --fs-counter: 0.75rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.75rem;
  --fs-money-table: 1.0625rem;
  --fs-money-md: 1.25rem;
  --fs-money-lg: 1.75rem;
  --fs-money-xl: 2.25rem;
  /* Summary strip of the expenses page: 28px on phones up to 36px on wide screens (owner decision
     at the 1A approval, PLAN 7.5 "ในการ์ดสรุป 1.75–2.25rem"). */
  --fs-money-summary: clamp(1.75rem, 1.25rem + 1.5vw, 2.25rem);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-body: 1.6;
  --lh-heading: 1.35;
  --lh-tight: 1.2;

  /* Spacing scale 4 / 8 / 12 / 16 / 24 / 32 (+48 for page-level gaps) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-card: 1rem;
  --radius-pill: 62.5rem;

  /* Lines */
  --border-w: 1px;
  --border-w-strong: 2px;
  --accent-w: 4px;
  --focus-w: 3px;
  --focus-offset: 2px;

  /* Component sizes */
  --touch-min: 2.75rem;          /* 44px minimum touch target */
  --control-h: 3rem;             /* 48px main buttons and inputs */
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;
  --icon-tile: 2.75rem;
  --icon-tile-lg: 3.25rem;
  --quick-btn: 3.5rem;
  --sidebar-w: 16.5rem;
  --topbar-h: 4rem;
  --topbar-h-compact: 3.5rem;
  --bottom-nav-h: 4.5rem;
  --content-max: 80rem;
  --dialog-w: 34rem;
  --dialog-max-h: 92vh;
  --sheet-max-h: 85vh;
  --popover-w: 21rem;
  --picker-w: 22rem;
  --search-w: 32rem;
  --chart-h: 18rem;
  --chart-h-compact: 15rem;
  --field-max: 28rem;
  --auth-w: 28rem;               /* sign-in pages column */
  --page-narrow: 46rem;          /* settings pages column */
  --qr-size: 15rem;              /* 2FA QR code (240px), API token QR */
  --quick-choice-h: 8.5rem;      /* the two big choices of the quick-entry page (phase 6) */
  --slip-min: 9rem;              /* quick entry: slip fields side by side / the slip's file name */
  --slip-thumb: 4.5rem;          /* quick entry: thumbnail of the chosen slip photo */
  --app-icon: 6rem;              /* the app icon on the offline page (phase 6) */
  --code-min: 10rem;             /* recovery code grid column */
  --progress-h: 0.625rem;
  --counter-size: 1.25rem;
  --swatch-h: 3.5rem;
  --money-unit-scale: 0.6em;
  --money-input-pad: 3.25rem;

  /* Minimum column widths for auto-fit grids */
  --grid-min: 17rem;
  --grid-min-wide: 20rem;
  --summary-min: 9.5rem;
  /* Summary strips of the real money pages: room for 6-digit balances at the 28–36px summary size */
  --summary-min-wide: 13rem;
  --filter-min: 14rem;
  --bill-min: 19rem;
  --swatch-min: 14rem;
  --tile-min: 6.5rem;
  /* "column: value" pairs of one imported row in the import preview (phase 5) */
  --pair-min: 11rem;
  --label-col: 10rem;
  /* Image preview of an accountant document (phase 4) */
  --preview-max-h: 28rem;
  /* The money calendar's month grid (phase 7): a day cell, and the narrowest a day column gets
     before the grid scrolls sideways */
  --cal-cell-h: 7.5rem;
  --cal-col-min: 7.5rem;

  /* Stacking */
  --z-sticky: 10;
  --z-sidebar: 20;
  --z-topbar: 30;
  --z-bottom-nav: 40;
  --z-popover: 50;
  --z-dock: 60;
  --z-picker-sheet: 65;
  --z-toast: 70;

  /* Breakpoints. CSS media queries cannot read custom properties, so app.css repeats these
     two literal values (768px / 992px); JS reads them from here. */
  --bp-md: 768px;
  --bp-lg: 992px;

  /* Motion (disabled under prefers-reduced-motion in app.css) */
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

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

  /* Surfaces: warm off-white page, cards slightly lighter, zebra slightly darker */
  --c-bg: #F7F5F0;
  --c-surface: #FFFEFB;
  --c-surface-2: #F4F1EA;
  --c-border: #E3DED3;
  --c-control-border: #857F72;
  --c-track: #E6E1D6;

  /* Text */
  --c-text: #1F2933;
  --c-muted: #5B6472;
  --c-on-solid: #FFFFFF;

  /* Focus ring */
  --c-focus: #2457C5;

  /* Semantic roles: -fg text/icons, -bg soft tint, -solid fill with -solid-text on top */
  --c-income-fg: #1B7341;
  --c-income-bg: #E5F2E9;
  --c-income-solid: #1B7341;
  --c-income-solid-text: #FFFFFF;

  --c-expense-fg: #B42318;
  --c-expense-bg: #FCEBE8;
  --c-expense-solid: #B42318;
  --c-expense-solid-text: #FFFFFF;

  --c-debt-fg: #A84206;
  --c-debt-bg: #FCEFE1;
  --c-debt-solid: #A84206;
  --c-debt-solid-text: #FFFFFF;

  --c-asset-fg: #1F4FB8;
  --c-asset-bg: #E8EEFB;
  --c-asset-solid: #1F4FB8;
  --c-asset-solid-text: #FFFFFF;

  --c-loan-fg: #6B3FA0;
  --c-loan-bg: #F1EBF8;
  --c-loan-solid: #6B3FA0;
  --c-loan-solid-text: #FFFFFF;

  --c-neutral-fg: #4B5563;
  --c-neutral-bg: #EDEEF0;
  --c-neutral-solid: #4B5563;
  --c-neutral-solid-text: #FFFFFF;

  --c-brand-fg: #2B4462;
  --c-brand-bg: #E7ECF3;
  --c-brand-solid: #2B4462;
  --c-brand-solid-text: #FFFFFF;

  /* Translucent helpers (not text colors, not measured) */
  --c-solid-hover: rgba(0, 0, 0, 0.12);
  --c-backdrop: rgba(23, 26, 31, 0.45);
  --shadow-card: 0 1px 2px rgba(31, 41, 51, 0.06), 0 2px 8px rgba(31, 41, 51, 0.04);
  --shadow-raised: 0 8px 24px rgba(31, 41, 51, 0.14), 0 1px 3px rgba(31, 41, 51, 0.08);
  --shadow-bar: 0 -1px 8px rgba(31, 41, 51, 0.06);

  /* Same colors as triplets for Bootstrap rgba() usage */
  --c-text-rgb: 31, 41, 51;
  --c-bg-rgb: 247, 245, 240;
  --c-surface-rgb: 255, 254, 251;
  --c-surface-2-rgb: 244, 241, 234;
  --c-brand-fg-rgb: 43, 68, 98;
}

/* ------------------------------------------------------------------ */
/* Dark colors: desaturated, background is not pure black              */
/* ------------------------------------------------------------------ */
html[data-bs-theme="dark"] {
  color-scheme: dark;

  --c-bg: #16181C;
  --c-surface: #1F2228;
  --c-surface-2: #262A31;
  --c-border: #343944;
  --c-control-border: #7A818D;
  --c-track: #3A3F49;

  --c-text: #E6E8EB;
  --c-muted: #A3ABB6;
  --c-on-solid: #FFFFFF;

  --c-focus: #8FB1F2;

  --c-income-fg: #6FBF8E;
  --c-income-bg: #1B3026;
  --c-income-solid: #2F7F51;
  --c-income-solid-text: #FFFFFF;

  --c-expense-fg: #EE8A80;
  --c-expense-bg: #3A2220;
  --c-expense-solid: #B1554B;
  --c-expense-solid-text: #FFFFFF;

  --c-debt-fg: #F0A860;
  --c-debt-bg: #36291B;
  --c-debt-solid: #9F622D;
  --c-debt-solid-text: #FFFFFF;

  --c-asset-fg: #86A8EE;
  --c-asset-bg: #1D2A44;
  --c-asset-solid: #4C6FB5;
  --c-asset-solid-text: #FFFFFF;

  --c-loan-fg: #B89BDF;
  --c-loan-bg: #2C2440;
  --c-loan-solid: #7F63AA;
  --c-loan-solid-text: #FFFFFF;

  --c-neutral-fg: #A7AFBB;
  --c-neutral-bg: #2A2E36;
  --c-neutral-solid: #687180;
  --c-neutral-solid-text: #FFFFFF;

  --c-brand-fg: #A9BBD4;
  --c-brand-bg: #232D3B;
  --c-brand-solid: #55729A;
  --c-brand-solid-text: #FFFFFF;

  --c-solid-hover: rgba(0, 0, 0, 0.22);
  --c-backdrop: rgba(0, 0, 0, 0.62);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-raised: 0 10px 28px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-bar: 0 -1px 8px rgba(0, 0, 0, 0.4);

  --c-text-rgb: 230, 232, 235;
  --c-bg-rgb: 22, 24, 28;
  --c-surface-rgb: 31, 34, 40;
  --c-surface-2-rgb: 38, 42, 49;
  --c-brand-fg-rgb: 169, 187, 212;
}

/* ------------------------------------------------------------------ */
/* Aliases shared by both themes                                       */
/* ------------------------------------------------------------------ */
:root,
html[data-bs-theme] {
  --c-income: var(--c-income-fg);
  --c-expense: var(--c-expense-fg);
  --c-debt: var(--c-debt-fg);
  --c-asset: var(--c-asset-fg);
  --c-loan: var(--c-loan-fg);
  --c-neutral: var(--c-neutral-fg);
  --c-brand: var(--c-brand-fg);
  --c-link: var(--c-brand-fg);
}

/* ------------------------------------------------------------------ */
/* Bootstrap mapping (html[...] outranks Bootstrap's [data-bs-theme])  */
/* ------------------------------------------------------------------ */
html[data-bs-theme] {
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--fs-base);
  --bs-body-font-weight: var(--fw-regular);
  --bs-body-line-height: var(--lh-body);

  --bs-body-bg: var(--c-bg);
  --bs-body-bg-rgb: var(--c-bg-rgb);
  --bs-body-color: var(--c-text);
  --bs-body-color-rgb: var(--c-text-rgb);
  --bs-emphasis-color: var(--c-text);
  --bs-emphasis-color-rgb: var(--c-text-rgb);
  --bs-heading-color: var(--c-text);
  --bs-secondary-color: var(--c-muted);
  --bs-secondary-bg: var(--c-surface-2);
  --bs-secondary-bg-rgb: var(--c-surface-2-rgb);
  --bs-tertiary-color: var(--c-muted);
  --bs-tertiary-bg: var(--c-surface-2);
  --bs-tertiary-bg-rgb: var(--c-surface-2-rgb);
  --bs-border-color: var(--c-border);
  --bs-border-color-translucent: var(--c-border);
  --bs-border-width: var(--border-w);

  --bs-link-color: var(--c-link);
  --bs-link-color-rgb: var(--c-brand-fg-rgb);
  --bs-link-hover-color: var(--c-link);
  --bs-link-hover-color-rgb: var(--c-brand-fg-rgb);

  --bs-primary: var(--c-brand-solid);
  --bs-primary-text-emphasis: var(--c-brand-fg);
  --bs-primary-bg-subtle: var(--c-brand-bg);
  --bs-primary-border-subtle: var(--c-brand-fg);
  --bs-secondary: var(--c-neutral-solid);
  --bs-secondary-text-emphasis: var(--c-neutral-fg);
  --bs-secondary-bg-subtle: var(--c-neutral-bg);
  --bs-secondary-border-subtle: var(--c-neutral-fg);
  --bs-success: var(--c-income-solid);
  --bs-success-text-emphasis: var(--c-income-fg);
  --bs-success-bg-subtle: var(--c-income-bg);
  --bs-success-border-subtle: var(--c-income-fg);
  --bs-danger: var(--c-expense-solid);
  --bs-danger-text-emphasis: var(--c-expense-fg);
  --bs-danger-bg-subtle: var(--c-expense-bg);
  --bs-danger-border-subtle: var(--c-expense-fg);
  --bs-warning: var(--c-debt-solid);
  --bs-warning-text-emphasis: var(--c-debt-fg);
  --bs-warning-bg-subtle: var(--c-debt-bg);
  --bs-warning-border-subtle: var(--c-debt-fg);
  --bs-info: var(--c-asset-solid);
  --bs-info-text-emphasis: var(--c-asset-fg);
  --bs-info-bg-subtle: var(--c-asset-bg);
  --bs-info-border-subtle: var(--c-asset-fg);

  --bs-form-valid-color: var(--c-income-fg);
  --bs-form-valid-border-color: var(--c-income-fg);
  --bs-form-invalid-color: var(--c-expense-fg);
  --bs-form-invalid-border-color: var(--c-expense-fg);
  --bs-focus-ring-color: var(--c-focus);
  --bs-focus-ring-width: var(--focus-w);
  --bs-code-color: var(--c-brand-fg);
  --bs-highlight-bg: var(--c-debt-bg);
  --bs-highlight-color: var(--c-text);

  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-card);
  --bs-border-radius-xl: var(--radius-card);
  --bs-border-radius-xxl: var(--radius-card);
  --bs-border-radius-pill: var(--radius-pill);
  --bs-box-shadow: var(--shadow-card);
  --bs-box-shadow-sm: var(--shadow-card);
  --bs-box-shadow-lg: var(--shadow-raised);
}