/* ==========================================================================
   Camera lab design tokens
   --------------------------------------------------------------------------
   The look comes from the Guell and Atelier mockups (kept beside the site
   in C:\bitgon\www\camera-lab-redesign): warm cream
   paper, a dark warm ink, one serif for everything, and a small set of
   accents taken from broken tile mosaic: blue, rust, amber, green and sky.
   Shapes are soft and a little irregular, like pebbles; the corners of
   buttons, cards and panels come from the radius tokens below.

   Colours are written in oklch so they match the mockups exactly. Every
   browser the site supports reads it.

   The site is light only, on every device: there is no dark palette and
   no theme button (see app/Theme.php).

   The variable names --bg, --surface, --ink, --muted, --line, --accent,
   --flag and --tab-* are the ones app.css (the admin) was written for, so
   they keep their names.
   ========================================================================== */

:root {
  /* --- surfaces and text ------------------------------------------------ */
  --bg:        oklch(0.95 0.03 85);     /* the page: cream paper */
  --surface:   oklch(0.975 0.022 85);   /* cards, panels, inputs */
  --surface-2: oklch(0.91 0.04 82);     /* side panels, inset wells, chips */
  --ink:       oklch(0.25 0.04 30);     /* text */
  --muted:     oklch(0.46 0.04 35);     /* secondary text */
  --line:      oklch(0.82 0.04 75);     /* borders */

  /* --- accents ---------------------------------------------------------- */
  --accent:     oklch(0.4 0.1 255);     /* blue: links, rings, the live thing */
  --accent-ink: oklch(0.97 0.02 85);    /* text on the blue */
  --rust:       oklch(0.48 0.16 40);    /* the warm accent: numerals, buttons */
  --rust-deep:  oklch(0.42 0.15 38);    /* the rust button, pressed */
  --flag:       var(--rust);            /* the admin's "watch this" colour */
  --amber:      oklch(0.72 0.15 55);
  --gold:       oklch(0.85 0.12 75);
  --gold-pale:  oklch(0.92 0.06 80);
  --gold-deep:  oklch(0.86 0.04 80);    /* the shadow under a cream ledge */
  --sky:        oklch(0.8 0.05 230);
  --sky-deep:   oklch(0.74 0.055 235);
  --sky-pale:   oklch(0.93 0.04 230);
  --green:      oklch(0.38 0.07 165);
  --green-lit:  oklch(0.45 0.08 150);

  /* The cream of the tiles' grout and of every ledge in the mosaic
     drawings. It is kept apart from --surface because the mosaic textures
     are fixed pictures, and the cream has to match them. */
  --cream:      oklch(0.97 0.02 85);
  --cream-2:    oklch(0.93 0.03 85);
  --cream-ink:  oklch(0.25 0.04 30);

  /* --- group colours ----------------------------------------------------
     One per group of simulators: the ring round a card's picture and the
     tab in the sidebar. */
  --tab-blue:   oklch(0.4 0.1 255);
  --tab-amber:  oklch(0.7 0.15 60);
  --tab-green:  oklch(0.45 0.08 160);
  --tab-violet: oklch(0.5 0.1 310);
  --tab-red:    oklch(0.5 0.16 40);
  --tab-teal:   oklch(0.52 0.08 200);
  --tab-slate:  oklch(0.46 0.04 35);

  /* --- status ----------------------------------------------------------- */
  --ok:        oklch(0.45 0.09 160);
  --warn:      oklch(0.58 0.13 70);
  --bad:       oklch(0.5 0.17 30);

  /* the admin's stripboard colours, kept for app.css */
  --strip-id:   var(--surface);
  --strip-ed:   var(--gold-pale);
  --strip-in:   var(--sky-pale);
  --strip-en:   oklch(0.92 0.04 20);
  --strip-ink:  var(--ink);
  --strip-line: var(--line);
  --paper:      #ffffff;
  --paper-ink:  var(--ink);
  --tag-red:     var(--tab-red);
  --tag-green:   var(--tab-green);
  --tag-blue:    var(--tab-blue);
  --tag-teal:    var(--tab-teal);
  --tag-violet:  var(--tab-violet);
  --tag-slate:   var(--tab-slate);
  --tag-amber:   var(--tab-amber);
  --tag-magenta: var(--flag);
  --tag-orange:  var(--amber);
  --tag-pink:    oklch(0.6 0.12 350);
  --tag-brown:   oklch(0.5 0.07 60);

  /* --- shapes ------------------------------------------------------------
     Two pebble corners, mirror images, so neighbouring buttons lean
     different ways. Two gentler ones for cards and panels. */
  --pebble-a:   30px 14px 30px 14px / 22px 30px 22px 30px;
  --pebble-b:   14px 30px 14px 30px / 30px 22px 30px 22px;
  --pebble-c:   26px 14px 24px 12px / 16px 24px 14px 22px;
  --pebble-d:   12px 26px 10px 24px / 22px 12px 24px 14px;
  --shadow:     0 24px 44px -28px oklch(0.3 0.08 40 / 0.7);

  /* --- metrics ---------------------------------------------------------- */
  --top:       60px;      /* header height */
  --rail:      0px;       /* app.css expects it; the lab has no rail */
  --side:      260px;     /* the simulator sidebar's width */
  --gutter:    clamp(16px, 4vw, 48px);
  --radius:    14px;      /* app.css: cards */
  --radius-sm: 10px;      /* app.css: buttons, panels, inputs */
  --tap:       44px;      /* minimum touch target */

  /* --- type ------------------------------------------------------------- */
  --font:  'Source Serif 4', Georgia, 'Times New Roman', serif;
  --label: 'Source Serif 4', Georgia, serif;
  --mono:  ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  color-scheme: light;
  box-sizing: border-box;
}