/*
 * Design tokens of Luxury Resale Marketplace — the single source of every visual value on this site.
 *
 * Every color, font, radius, shadow, size and duration on the pages is read from here in the
 * browser; no page and no component writes a value of its own. Two themes are two value sets of the
 * same names: the light values are the default, the dark ones apply when the device asks for dark
 * and the reader has not chosen, or when the reader chose dark (data-theme on <html>, nav.js).
 *
 * The names are semantic (what a color is for), so a token reads like a class in the code:
 * --color-muted is the muted text, --color-primary the brand fill. When the product has a token file
 * of its own (globals.css, a theme), the names here mirror it and the header says when it was last
 * copied; a token the product lacks is marked "proposed" and listed on the Foundations page.
 *
 * Color scheme: B — Atelier Green & Brass (SC-002). Deep workshop green, brass, ivory; "passed" is
 * teal so it never reads as the brand. In dark, the main button turns ivory and the green stays in
 * the soft tints.
 *
 * Foundations (design/typography, spacing, shape, motion): type pairing A — Cormorant Garamond for
 * display, Inter for text — proposed, to be picked at the gate against pairing B (Playfair Display +
 * Manrope); small radii (2 / 4 / 6 px), few warm shadows, calm motion without overshoot. Everything
 * below the colors is proposed: the product has no token file yet.
 */
:root {
  /* Typefaces — pairing A, proposed (pick at the gate). Every family covers Latin and Cyrillic, the
     site and the product being English and Ukrainian. Display: titles, item names, the certificate;
     never numbers, never under 24 px. Sans: everything else, prices included (tabular figures). */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* Pairing B, the alternative: loaded only so the Typography page shows it beside A
     (base.css › [data-type-pairing='b']). Remove with its link in site.mjs once A or B is picked. */
  --font-display-alt: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans-alt: 'Manrope', ui-sans-serif, system-ui, sans-serif;

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

  /* Size ramp: each size with its line height, on the 4 px grid */
  --text-2xs: 11px;
  --leading-2xs: 16px;
  --text-xs: 12px;
  --leading-xs: 16px;
  --text-sm: 14px;
  --leading-sm: 20px;
  --text-base: 16px;
  --leading-base: 24px;
  --text-lg: 18px;
  --leading-lg: 24px;
  --text-xl: 24px;
  --leading-xl: 28px;
  --text-2xl: 28px;
  --leading-2xl: 36px;
  --text-3xl: 34px;
  --leading-3xl: 40px;
  --text-4xl: 52px;
  --leading-4xl: 56px;

  /* Text styles (base.css › .t-*): the ramp put to work. The display face runs small for its size, so
     its styles sit a step above the sans ones. */
  --text-display: var(--text-4xl);
  --leading-display: var(--leading-4xl);
  --tracking-display: -0.015em;
  --weight-display: var(--weight-medium);
  --text-page-title: var(--text-3xl);
  --leading-page-title: var(--leading-3xl);
  --tracking-page-title: -0.01em;
  --text-section-title: var(--text-xl);
  --leading-section-title: var(--leading-xl);
  --weight-title: var(--weight-semibold);
  --text-card-title: var(--text-base);
  --leading-card-title: var(--leading-base);
  --text-body: var(--text-sm);
  --leading-body: var(--leading-sm);
  --text-small: var(--text-xs);
  --leading-small: var(--leading-xs);
  --text-label: var(--text-2xs);
  --leading-label: var(--leading-2xs);
  --tracking-label: 0.1em;
  --text-figure: var(--text-2xl);
  --leading-figure: var(--leading-2xl);
  --tracking-figure: -0.01em;
  --text-figure-sm: var(--text-lg);
  --leading-figure-sm: var(--leading-lg);
  --text-mono: var(--text-xs);
  --leading-mono: var(--leading-xs);

  /* Surfaces */
  --color-page: #f8f5ee;
  --color-surface: #ffffff;
  --color-surface-muted: #efebe1;
  --color-surface-inverted: #1a1816;
  --color-overlay: rgb(26 24 22 / 0.5);
  --color-device: #23211e; /* the bezel of a phone or tablet frame on the showcase */

  /* Text */
  --color-foreground: #1a1816;
  --color-muted: #57524c;
  --color-subtle: #6c6a62;
  --color-inverted: #f8f5ee;

  /* Borders and focus */
  --color-default: #e6dfd3;
  --color-emphasis: #8c8273; /* field and control borders: 3:1 against surface and page (WCAG 1.4.11) */
  --color-ring: #1d3a30;

  /* Brand — replaced by the color scheme decision. The soft tint carries a selected row or a chip;
     the strong text is the brand color dark enough to read on the soft tint. */
  --color-primary: #1d3a30;
  --color-primary-hover: #284d40;
  --color-primary-foreground: #f6f1e6;
  --color-primary-soft: #e4ece6;
  --color-primary-strong: #132a22;

  /* A logo is drawn in currentColor with its knockouts in the color behind it. This is that color on
     the page; whatever puts a mark on another color sets it again (the brand tile: --color-primary). */
  --lg-ground: var(--color-surface);

  /* Feedback: the solid color is for icons, bars and filled buttons; the soft tint carries text in
     the -text color. Every -text on its -soft meets WCAG AA in both themes. */
  --color-danger: #a2362b;
  --color-danger-hover: #8a2c22;
  --color-danger-foreground: #ffffff;
  --color-danger-soft: #f7e5e2;
  --color-danger-text: #a2362b;
  --color-success: #2d6a7a;
  --color-success-foreground: #ffffff;
  --color-success-soft: #e2eef1;
  --color-success-text: #2d6a7a;
  --color-warning: #9c6610;
  --color-warning-foreground: #ffffff;
  --color-warning-soft: #f6eedc;
  --color-warning-text: #8a5d0c;
  --color-info: #2f5c8a;
  --color-info-foreground: #ffffff;
  --color-info-soft: #e4ecf5;
  --color-info-text: #2f5c8a;

  /* Brass: decoration only — the rule under a title, the ring of a certificate's seal. Never text
     under 18 px, never an action. */
  --color-accent: #94733d;
  --color-accent-soft: #f1e9da;

  /* Item categories (placeholders until Q-010 names them), away from the brand and feedback tones */
  --color-category-1: #6e4a7e;
  --color-category-2: #9a5f24;
  --color-category-3: #3e5f8a;

  /* Illustrations: drawn only with these (assets/illustrations.js). Ink in workshop green, brass for
     what is proven, paper and soft tints behind. */
  --ill-line: #1d3a30;
  --ill-fill: #efebe1;
  --ill-soft: #e4ece6;
  --ill-paper: #ffffff;
  --ill-accent: #94733d;
  --ill-accent-soft: #f1e9da;

  /* Elevation: three, soft and warm (a brown-black, like a shadow on ivory paper). Borders do most of
     the separating; a shadow says a thing sits above the page. Card: at rest. Raised: lifted on
     hover, a menu, a popover. Overlay: a dialog, a drawer, a toast. */
  --shadow-card: 0 1px 2px 0 rgb(48 36 20 / 0.06);
  --shadow-raised: 0 1px 2px 0 rgb(48 36 20 / 0.05), 0 8px 24px -6px rgb(48 36 20 / 0.14);
  --shadow-overlay: 0 2px 6px 0 rgb(48 36 20 / 0.06), 0 24px 48px -12px rgb(48 36 20 / 0.24);

  /* Radii: small and exact, like a case's bevel. Controls (buttons, fields, chips), cards (cards,
     tables, photos' frames), overlays (dialogs, popovers, toasts), full (pills, badges, avatars) */
  --radius-control: 2px;
  --radius-card: 4px;
  --radius-overlay: 6px;
  --radius-full: 9999px;

  /* Layout: the shell */
  --size-sidebar: 240px;
  --size-header: 56px;
  --size-form: 384px;
  --size-page: 1280px; /* the widest the content grows */
  --size-prose: 680px; /* the longest line of running text */
  --size-dialog: 480px;
  --size-drawer: 400px;

  /* Control heights: one height for buttons and fields reads better in a form row */
  --size-control: 40px;
  --size-control-sm: 32px;
  --size-control-lg: 48px; /* the main action of a listing or checkout, on a phone too */
  --size-touch: 44px; /* the smallest target a finger is given */

  /* Icons: 16 on the web with a 1.75 line; 24 and the phone's icons take the finer 1.5 */
  --icon-stroke-web: 1.75;
  --icon-stroke-lg: 1.5;
  --icon-size-phone: 15px;

  /* Grid: 12 columns; the gutter and the page's margin narrow on a phone */
  --grid-columns: 12;
  --grid-gutter: 24px;
  --grid-gutter-sm: 16px;
  --grid-margin: 32px;
  --grid-margin-sm: 16px;

  /* Breakpoints: the widths the layout changes at. A media query cannot read a custom property, so
     these name the numbers the queries write. */
  --breakpoint-sm: 640px;
  --breakpoint-md: 900px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1440px;

  /* Layering */
  --z-header: 10;
  --z-modal: 50;
  --z-toast: 60;

  /* Motion: calm. Things ease in and settle; nothing bounces or overshoots. Fast: hover, focus,
     color. Base: a toggle, a tab, a row opening. Slow: a dialog, a drawer, a toast. Slower: the
     seal of a certificate drawing once. */
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
  --duration-slower: 640ms;
  --duration-spin: 800ms; /* one turn of a spinner */
  --duration-loader: 1600ms; /* one cycle of a loader drawn from the logo (components.css › Loader) */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* moves within the screen */
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); /* arrives, and settles slowly */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* leaves, gathering speed */

  /* The 4 px spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  color-scheme: light;
}

/* ── Dark: the device asks for it and the reader has not chosen, or the reader chose it ── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-page: #0f1412;
    --color-surface: #161c19;
    --color-surface-muted: #1e2522;
    --color-surface-inverted: #efeae2;
    --color-overlay: rgb(0 0 0 / 0.7);
    --color-device: #3a403d;

    --color-foreground: #efeae2;
    --color-muted: #b7b0a6;
    --color-subtle: #8e928c;
    --color-inverted: #0f1412;

    --color-default: #2a322e;
    --color-emphasis: #6e7a74;
    --color-ring: #e6dcc6;

    --color-primary: #e6dcc6;
    --color-primary-hover: #f0e8d6;
    --color-primary-foreground: #10201a;
    --color-primary-soft: #1e2c26;
    --color-primary-strong: #d3e6db;

    --color-danger: #ee8e83;
    --color-danger-hover: #f3a69d;
    --color-danger-foreground: #2a0d0a;
    --color-danger-soft: #2e1b19;
    --color-danger-text: #ee8e83;
    --color-success: #86c6d4;
    --color-success-foreground: #0e2228;
    --color-success-soft: #14252a;
    --color-success-text: #86c6d4;
    --color-warning: #e0b866;
    --color-warning-foreground: #2a2214;
    --color-warning-soft: #2a2214;
    --color-warning-text: #e0b866;
    --color-info: #8db5e0;
    --color-info-foreground: #172231;
    --color-info-soft: #172231;
    --color-info-text: #8db5e0;
    --color-accent: #cdae74;
    --color-accent-soft: #2a2418;
    --color-category-1: #c1a0d1;
    --color-category-2: #dda46a;
    --color-category-3: #9db8dc;
    --ill-line: #d3e6db;
    --ill-fill: #1e2522;
    --ill-soft: #1e2c26;
    --ill-paper: #161c19;
    --ill-accent: #cdae74;
    --ill-accent-soft: #2a2418;

    --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.4);
    --shadow-raised: 0 1px 2px 0 rgb(0 0 0 / 0.4), 0 8px 24px -6px rgb(0 0 0 / 0.55);
    --shadow-overlay: 0 2px 6px 0 rgb(0 0 0 / 0.4), 0 24px 48px -12px rgb(0 0 0 / 0.7);

    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --color-page: #0f1412;
  --color-surface: #161c19;
  --color-surface-muted: #1e2522;
  --color-surface-inverted: #efeae2;
  --color-overlay: rgb(0 0 0 / 0.7);
  --color-device: #3a403d;

  --color-foreground: #efeae2;
  --color-muted: #b7b0a6;
  --color-subtle: #8e928c;
  --color-inverted: #0f1412;

  --color-default: #2a322e;
  --color-emphasis: #6e7a74;
  --color-ring: #e6dcc6;

  --color-primary: #e6dcc6;
  --color-primary-hover: #f0e8d6;
  --color-primary-foreground: #10201a;
  --color-primary-soft: #1e2c26;
  --color-primary-strong: #d3e6db;

  --color-danger: #ee8e83;
  --color-danger-hover: #f3a69d;
  --color-danger-foreground: #2a0d0a;
  --color-danger-soft: #2e1b19;
  --color-danger-text: #ee8e83;
  --color-success: #86c6d4;
  --color-success-foreground: #0e2228;
  --color-success-soft: #14252a;
  --color-success-text: #86c6d4;
  --color-warning: #e0b866;
  --color-warning-foreground: #2a2214;
  --color-warning-soft: #2a2214;
  --color-warning-text: #e0b866;
  --color-info: #8db5e0;
  --color-info-foreground: #172231;
  --color-info-soft: #172231;
  --color-info-text: #8db5e0;
  --color-accent: #cdae74;
  --color-accent-soft: #2a2418;
  --color-category-1: #c1a0d1;
  --color-category-2: #dda46a;
  --color-category-3: #9db8dc;
  --ill-line: #d3e6db;
  --ill-fill: #1e2522;
  --ill-soft: #1e2c26;
  --ill-paper: #161c19;
  --ill-accent: #cdae74;
  --ill-accent-soft: #2a2418;

  --shadow-card: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-raised: 0 1px 2px 0 rgb(0 0 0 / 0.4), 0 8px 24px -6px rgb(0 0 0 / 0.55);
  --shadow-overlay: 0 2px 6px 0 rgb(0 0 0 / 0.4), 0 24px 48px -12px rgb(0 0 0 / 0.7);

  color-scheme: dark;
}

/* ── Phone: the compact scale ──
   A phone is held at a third of a desktop's distance, so its type, controls and lines run a step
   smaller than the web's: body 13, a row 14, titles in the display face at 26. Everything drawn inside
   a phone frame reads its sizes from here; the touch target stays 44. The role tokens are set again
   because a var() is resolved where it is declared, not where it is read. */
:where(.device--phone, .st-phone) {
  --text-2xs: 10px;
  --leading-2xs: 14px;
  --text-xs: 11px;
  --leading-xs: 15px;
  --text-sm: 13px;
  --leading-sm: 18px;
  --text-base: 14px;
  --leading-base: 20px;
  --text-lg: 15px;
  --leading-lg: 20px;
  --text-xl: 18px;
  --leading-xl: 24px;
  --text-2xl: 22px;
  --leading-2xl: 28px;
  --text-3xl: 26px;
  --leading-3xl: 32px;
  --text-4xl: 32px;
  --leading-4xl: 38px;

  --text-display: var(--text-4xl);
  --leading-display: var(--leading-4xl);
  --text-page-title: var(--text-3xl);
  --leading-page-title: var(--leading-3xl);
  --text-section-title: var(--text-xl);
  --leading-section-title: var(--leading-xl);
  --text-card-title: var(--text-base);
  --leading-card-title: var(--leading-base);
  --text-body: var(--text-sm);
  --leading-body: var(--leading-sm);
  --text-small: var(--text-xs);
  --leading-small: var(--leading-xs);
  --text-label: var(--text-2xs);
  --leading-label: var(--leading-2xs);
  --text-figure: var(--text-2xl);
  --leading-figure: var(--leading-2xl);
  --text-figure-sm: var(--text-lg);
  --leading-figure-sm: var(--leading-lg);
  --text-mono: var(--text-xs);
  --leading-mono: var(--leading-xs);

  /* A tighter rhythm: the four steps a phone's rows and cards are made of, each a little smaller */
  --space-3: 10px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 20px;

  --size-header: 48px;
  --size-control: 40px;
  --size-control-sm: 30px;
  --size-control-lg: 44px;

  --icon-size: var(--icon-size-phone); /* the base icon inside a phone; 16 on the web */
  --icon-stroke: var(--icon-stroke-lg);
  --ill-stroke-compact: 1.15; /* a picture's line on a phone: finer, so it reads drawn, not printed */
}