/* RYKER OS design tokens. Charcoal surfaces, warm white type, neutral greys and one restrained
   muted gold, as the owner's brief for the admin asks (18 Oct 2026): no gradients, minimal
   decoration, every section in one card. Data colours are muted so status and series read
   without shouting. Every other stylesheet reads these; no raw colour, size, radius or shadow
   appears elsewhere. Contrast was computed with the WCAG formula against --surface. */

/* RYKER OS design tokens: Ryker & Co's packaging turned into a working tool (8 Nov 2026). The shell
   is the oxblood sleeve box, the work surface is cream paper, ink is near-black like the cap, and pale
   amber (the perfume) marks sales and fill levels. Oxblood is for actions and selection only; state
   colours are muted and darker than the ground so they read as text. Every other stylesheet reads
   these; no raw colour, size, radius or shadow appears elsewhere. Contrast was computed with the WCAG
   formula against --surface (and --bg where text sits on the ground). */

:root {
  color-scheme: light;

  /* ---- Surfaces: cream paper ---- */
  --bg: #F1EBE2;              /* page ground */
  --bg-rail: #5B1A25;         /* the side rail: the oxblood sleeve */
  --rail-ink: #F7ECDD;        /* cream on the oxblood rail, 10.9:1 */
  --rail-ink-2: #E6D2BC;      /* 8.8:1 */
  --rail-ink-3: #D2B9A1;      /* group titles, 7.0:1 */
  --rail-hover: rgba(251, 244, 234, .09);
  --rail-current: rgba(251, 244, 234, .17);
  --rail-line: rgba(251, 244, 234, .18);
  --rail-rose: #F4C2B8;
  --surface: #FBF8F3;         /* panels */
  --surface-2: #F3EDE4;       /* inside a panel: fields, chips, hover */
  --surface-3: #E8E0D4;       /* hover on surface-2 */
  --line: #E1D8CB;            /* panel edges and the line between rows */
  --line-strong: #CBBDAA;     /* dividers that must be seen */
  --edge: #8A7D70;            /* field and control edges, 3.9:1 on a panel */

  /* ---- Text: ink ---- */
  --text: #1E1915;            /* 16.5:1 on a panel */
  --text-2: #4E453E;          /* 9.1:1 */
  --text-3: #6B6158;          /* metadata, axis labels, 5.9:1 on a panel, 5.2:1 on the ground */

  /* ---- Action: oxblood (the names stay "gold" so every page follows) ---- */
  --gold: #6E1F2C;            /* main action, links, selection, focus; 10.6:1 */
  --gold-strong: #5B1A25;
  --gold-pressed: #47131C;
  --gold-soft: rgba(110, 31, 44, .07);
  --gold-line: rgba(110, 31, 44, .32);
  --on-gold: #FBF4EA;         /* text on oxblood */
  --on-rose: #FFFFFF;
  --bar-bg: var(--bg);
  --live-ring: rgba(47, 107, 69, .35);
  --live-ring-0: rgba(47, 107, 69, 0);

  /* ---- Data and status colours: dark enough to be text on paper ---- */
  --c-gold: #7E5A1A;          /* paid sales: the perfume's amber, darkened for text (5.0:1 on its chip) */
  --c-teal: #2E6A5E;          /* orders */
  --c-amber: #8A5A0B;         /* waiting on a person */
  --c-violet: #634A86;
  --c-sky: #2F5B83;           /* stock, information */
  --c-green: #2F6B45;         /* done */
  --c-rose: #A8322A;          /* problems: brick, apart from the brand's oxblood */
  --c-slate: #6B645D;         /* ended */
  --c-gold-soft: #F4E8CF;
  --c-teal-soft: #E0EEEA;
  --c-amber-soft: #F6E9CF;
  --c-violet-soft: #ECE6F3;
  --c-sky-soft: #E2EAF2;
  --c-green-soft: #E2EEE5;
  --c-rose-soft: #F7E1DD;
  --c-slate-soft: #ECE7E0;
  --c-gold-fill: rgba(214, 170, 92, .28);    /* the area under the sales line, and a bottle's fill */
  --perfume: #E3C891;         /* the liquid in the bottle: fill levels */
  --perfume-low: #D99A82;     /* a bottle running low */

  /* ---- Names the screens already use (kept so every page follows the theme) ---- */
  --paper: var(--bg);
  --sheet: var(--surface);
  --ink: var(--text);
  --pencil: var(--text-2);
  --rule: var(--line);
  --accent: var(--gold);
  --accent-hover: var(--gold-strong);
  --accent-pressed: var(--gold-pressed);
  --on-accent: var(--on-gold);
  --strip-bg: #3A1018;        /* the environment strip outside production */
  --strip-fg: #F4E3C6;
  --color-maroon: #5B1A25;
  --color-burgundy: #6E1F2C;
  --color-gold: var(--gold);
  --color-champagne: var(--gold-strong);
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--text-2);
  --color-border: var(--line);
  --color-maroon-deep: #47131C;
  --color-gold-ink: var(--gold);
  --color-field-border: var(--edge);
  --color-plate: var(--surface-2);
  --color-night: var(--strip-bg);
  --color-error: var(--c-rose);
  --color-error-bg: var(--c-rose-soft);
  --color-success: var(--c-green);
  --color-success-bg: var(--c-green-soft);
  --color-warning: var(--c-amber);
  --color-warning-bg: var(--c-amber-soft);
  --color-disabled-bg: var(--surface-2);
  --color-disabled-text: var(--text-3);
  --color-backdrop: rgba(40, 18, 22, .45);

  /* ---- Type ---- */
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font-body);   /* one family: titles and figures in the same face, heavier */
  --font-brand: "DM Serif Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;  /* the wordmark only */
  --tracking-label: .14em;    /* fragrance names in capitals, as on the bottle label */
  --text-tiny: .75rem;        /* 12 / 16: group titles and column heads in capitals */
  --leading-tiny: 1rem;
  --tracking-caps: .08em;
  --text-meta: .8125rem;      /* 13 / 18: metadata, definitions, times */
  --leading-meta: 1.125rem;
  --text-table: .875rem;      /* 14 / 20: table body, secondary text, field labels */
  --leading-table: 1.25rem;
  --text-body: .9375rem;      /* 15 / 22: body, fields, buttons */
  --leading-body: 1.375rem;
  --text-card-title: 1rem;    /* 16 / 22: card titles */
  --leading-card-title: 1.375rem;
  --text-section: 1.125rem;   /* 18 / 26: section headings */
  --leading-section: 1.625rem;
  --text-title: 1.625rem;     /* 26 / 32: page titles */
  --leading-title: 2rem;
  --text-figure: 1.75rem;     /* 28 / 34: figures, tabular */
  --leading-figure: 2.125rem;
  --text-brand: 1.25rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Space: 4px base ---- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --gap: 1.25rem;             /* 20: between cards */
  --pad-card: 1.25rem;        /* 20: inside a card */
  --pad-card-wide: 1.5rem;    /* 24 */

  /* ---- Layout ---- */
  --rail-w: 16rem;            /* 256 */
  --bar-h: 4rem;              /* 64 */
  --content-max: 90rem;       /* 1440 */
  --measure: 40rem;
  --row-h: 2.75rem;           /* 44 with a mouse; 48 on touch (components.css) */
  --row-h-touch: 3rem;
  --tap: 2.75rem;             /* 44: smallest touch target */
  --control: 2.75rem;
  --control-small: 2.25rem;
  --dialog-w: 32rem;
  --icon: 1.125rem;           /* 18 */
  --icon-small: 1rem;
  --badge: 2.25rem;
  --avatar: 2.25rem;
  --popover-w: 22rem;

  /* ---- Shape ---- */
  --radius-none: 0;
  --radius-xs: 3px;           /* chips inside rows */
  --radius-sm: 4px;           /* controls */
  --radius-md: 6px;           /* panels and dialogs: the box's crisp corners */
  --radius-lg: 6px;
  --radius-full: 999px;       /* pills and dots */
  --border-w: 1px;
  --rule-thick: 2px;
  --focus-w: 2px;
  --focus-offset: 2px;
  --shadow-card: none;
  --shadow-overlay: 0 18px 48px -18px rgba(58, 16, 24, .32);
  --shadow-tip: 0 10px 28px -10px rgba(58, 16, 24, .28);

  /* ---- Status shapes ---- */
  --dot: .5rem;
  --chart-bar-max: 1.5rem;    /* 24 */

  /* ---- Motion: hover changes, the live dot, the first-load pulse ---- */
  --dur-fast: 160ms;
  --dur-pulse: 1200ms;
  --dur-live: 2400ms;
  --placeholder-dim: .55;

  /* ---- Glass: only on what floats above the page (top bar, menus, dialogs, pop-up messages),
     never on cards or tables, so figures always sit on a solid surface. ---- */
  --glass-bar: rgba(241, 235, 226, .9);
  --glass-float: rgba(251, 248, 243, .96);
  --glass-edge: rgba(30, 25, 21, .10);
  --glass-shine: none;
  --glass-blur: saturate(140%) blur(18px);
  --backdrop-blur: blur(4px);
  --toast-w: 22rem;
  --dur-toast: 220ms;

  /* ---- Layers ---- */
  --z-bar: 40;
  --z-tip: 45;
  --z-menu: 50;
  --z-toast: 60;
  --z-skip: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: .01ms; --dur-pulse: .01ms; --dur-live: .01ms; --dur-toast: .01ms; }
}
/* Someone who asks for less transparency gets solid surfaces everywhere. */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-bar: var(--bar-bg); --glass-float: var(--surface); --glass-blur: none; --backdrop-blur: none; }
}

/* Paper is light. Printed, the theme's names point at its darkest ink and at no fill, so every
   page prints dark on white whether or not the browser prints backgrounds. */
@media print {
  :root {
    color-scheme: light;
    --bg: transparent;
    --surface: transparent;
    --surface-2: transparent;
    --surface-3: transparent;
    --text: #000;
    --text-2: #333;
    --text-3: #555;
    --line: #999;
    --line-strong: #777;
    --gold: #000;
    --gold-strong: #000;
    --gold-soft: transparent;
  }
}