/* FişBox design tokens. Source of truth: DESIGN.md. Pages use these names, never raw values. */

:root {
  color-scheme: light dark;

  /* Fonts (self-host Inter + IBM Plex Mono as woff2, latin + latin-ext for ğ ş ı İ ç ö ü) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale: size / line-height */
  --text-xs: 0.75rem;    --leading-xs: 1rem;       /* 12 / 16  captions, badges */
  --text-sm: 0.875rem;   --leading-sm: 1.25rem;    /* 14 / 20  tables, labels, helper text */
  --text-base: 1rem;     --leading-base: 1.5rem;   /* 16 / 24  body, inputs */
  --text-lg: 1.125rem;   --leading-lg: 1.75rem;    /* 18 / 28  lead text */
  --text-xl: 1.25rem;    --leading-xl: 1.75rem;    /* 20 / 28  card and section titles */
  --text-2xl: 1.5rem;    --leading-2xl: 2rem;      /* 24 / 32  page titles */
  --text-3xl: 2rem;      --leading-3xl: 2.5rem;    /* 32 / 40  marketing h2 */
  --text-4xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); --leading-4xl: 1.1; /* hero h1 */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --tracking-heading: -0.015em;

  /* Spacing (4px base) */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-24: 6rem;    /* 96 */
  --section-y: clamp(var(--space-16), 8vw, var(--space-24));
  --gutter: var(--space-4);
  --width-app: 80rem;      /* 1280 */
  --width-marketing: 70rem;/* 1120 */
  --width-prose: 68ch;

  /* Shape */
  --radius-sm: 4px;    /* badges, small chips */
  --radius-md: 8px;    /* buttons, inputs, cards */
  --radius-lg: 12px;   /* modals, large panels */
  --radius-full: 999px;/* avatars, count pills */

  /* Motion */
  --duration-fast: 120ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- Light (default) ---------- */
:root,
:root[data-theme="light"] {
  --color-bg: #FAF9F6;            /* page background (paper) */
  --color-surface: #FFFFFF;       /* cards, tables, inputs */
  --color-sunken: #F2F0EA;        /* receipt viewer background, table header, code */
  --color-border: #E2DFD6;        /* dividers, card borders */
  --color-border-strong: #8F8B7E; /* input and checkbox borders (3:1 on surface) */

  --color-text: #1B1915;          /* headings, body */
  --color-text-muted: #5C584D;    /* secondary text, labels */
  --color-text-subtle: #6B675B;   /* placeholders, captions */

  --color-primary: #0E6170;       /* buttons, focus ring, active nav */
  --color-primary-hover: #0A4E5B; /* hover/pressed, links */
  --color-primary-soft: #E3F1F3;  /* selected row, info badge background */
  --color-on-primary: #FFFFFF;
  --color-link: #0A4E5B;

  --color-warning: #B7791F;       /* low-confidence marker bar */
  --color-warning-text: #7A4A00;
  --color-warning-soft: #FFF1D0;
  --color-success-text: #245A2E;
  --color-success-soft: #E2F2E4;
  --color-danger: #B3261E;        /* error text and borders */
  --color-danger-text: #9B1C14;
  --color-danger-soft: #FDE7E4;
  --color-neutral-text: #433F36;
  --color-neutral-soft: #EFEDE7;

  --shadow-pop: 0 4px 16px rgb(27 25 21 / 0.10), 0 1px 3px rgb(27 25 21 / 0.08);   /* menus, popovers */
  --shadow-modal: 0 16px 48px rgb(27 25 21 / 0.18), 0 2px 6px rgb(27 25 21 / 0.08);/* dialogs */
}

/* ---------- Dark: follows the system unless the user chose light ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #14130F;
    --color-surface: #1D1B17;
    --color-sunken: #0F0E0B;
    --color-border: #34312A;
    --color-border-strong: #6E6A5E;

    --color-text: #ECEAE3;
    --color-text-muted: #A9A598;
    --color-text-subtle: #948F82;

    --color-primary: #5FB4C4;
    --color-primary-hover: #7CC6D4;
    --color-primary-soft: #12313A;
    --color-on-primary: #06222A;
    --color-link: #7CC6D4;

    --color-warning: #E0A83A;
    --color-warning-text: #F2C46B;
    --color-warning-soft: #3A2A0A;
    --color-success-text: #8FD39B;
    --color-success-soft: #16301B;
    --color-danger: #F5A39C;
    --color-danger-text: #F5A39C;
    --color-danger-soft: #40191A;
    --color-neutral-text: #CFCBC0;
    --color-neutral-soft: #2B2822;

    --shadow-pop: 0 4px 16px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
    --shadow-modal: 0 16px 48px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.4);
  }
}

:root[data-theme="dark"] {
  --color-bg: #14130F;
  --color-surface: #1D1B17;
  --color-sunken: #0F0E0B;
  --color-border: #34312A;
  --color-border-strong: #6E6A5E;

  --color-text: #ECEAE3;
  --color-text-muted: #A9A598;
  --color-text-subtle: #948F82;

  --color-primary: #5FB4C4;
  --color-primary-hover: #7CC6D4;
  --color-primary-soft: #12313A;
  --color-on-primary: #06222A;
  --color-link: #7CC6D4;

  --color-warning: #E0A83A;
  --color-warning-text: #F2C46B;
  --color-warning-soft: #3A2A0A;
  --color-success-text: #8FD39B;
  --color-success-soft: #16301B;
  --color-danger: #F5A39C;
  --color-danger-text: #F5A39C;
  --color-danger-soft: #40191A;
  --color-neutral-text: #CFCBC0;
  --color-neutral-soft: #2B2822;

  --shadow-pop: 0 4px 16px rgb(0 0 0 / 0.5), 0 1px 3px rgb(0 0 0 / 0.4);
  --shadow-modal: 0 16px 48px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.4);
}

/* ---------- Base ---------- */
html { font-family: var(--font-sans); font-size: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-link); text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Amounts, dates, VKN and receipt numbers: aligned digits */
.num, .money { font-variant-numeric: tabular-nums; }
.money { text-align: right; white-space: nowrap; }
.code { font-family: var(--font-mono); font-size: var(--text-sm); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}