/* Modernist design tokens, matching the design handoff under
   docs/design_handoff/_ds/. This file is the single source of truth for
   colour, type, and spacing. Change a value here, not in a page.

   Do not write a glob path inside a CSS comment: the slash-star sequence
   closes the comment early and silently voids the rule that follows. */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* The accent is cyanotype blue: the colour a photograph was first printed
     in. It replaced a vermilion red in September 2026. See JOURNAL/0025.

     The accent has two jobs and they need two tokens, which the red never
     made obvious because it failed both equally. As a FIELD it carries paper
     type, so it has to be dark; as TYPE on the dark ground it has to be
     light. No single value does both: paper type needs a relative luminance
     at or below 0.155, type on #191817 needs 0.236 or more. So:

       --color-accent      the field. Constant in both themes, like --paper,
                           because a field with paper type on it has no
                           reason to change when the ground does.
       --color-accent-ink  type, strokes, focus rings, the crop marks in the
                           logo. Per theme.

     Never use --color-accent for a foreground colour, and never use
     --color-accent-ink for a background a paper label sits on. */
  --color-accent: #1b5183;
  --color-accent-ink: #1b5183;
  --color-accent-hover: #0c416f;
  --color-accent-press: #05345c;

  /* A second accent was never chosen for this scheme. These are a
     machine-derived stand-in kept only so both sets resolve; nothing in
     app.css uses them. */
  --color-accent-2: #54789c;

  /* Type on an accent field is always paper, never the bg or text token, so
     it stays legible when the theme flips. Constant in both themes. */
  --paper: #f3f2f2;

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #f1f6fc;
  --color-accent-200: #dbeaf9;
  --color-accent-300: #bdd7f4;
  --color-accent-400: #90bce9;
  --color-accent-500: #619dda;
  --color-accent-600: #387ec1;
  --color-accent-700: #1b609e;
  --color-accent-800: #0a4475;
  --color-accent-900: #0a2d4d;

  --color-accent-2-100: #f2f6fa;
  --color-accent-2-200: #e0e9f3;
  --color-accent-2-300: #c5d6e9;
  --color-accent-2-400: #9fbbd8;
  --color-accent-2-500: #769cc4;
  --color-accent-2-600: #547eaa;
  --color-accent-2-700: #3a6189;
  --color-accent-2-800: #254564;
  --color-accent-2-900: #192d42;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Zero radius everywhere is a design non-negotiable. */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* Interactive controls sit on white in the light theme so they read as
     things you can act on, rather than dissolving into the paper ground. */
  --control-bg: #ffffff;

  /* The furniture in the shop's drawn rooms (rooms.Furniture). Constant in
     both themes, like --paper: a sofa does not change colour when the page
     goes dark, and the wall behind it is the scene's own colour, not the
     theme's. Muted and warm on purpose, so the photographs on the wall are the
     only saturated thing in the room. */
  --room-fabric: #9a938a;
  --room-cushion: #aca59c;
  --room-wood: #b08d6a;
  --room-wood-dark: #8a6c50;
  --room-metal: #3a3836;
  --room-linen: #f4f1ec;
  --room-shade: #ece5d8;
  --room-ceramic: #c7b9a6;
  --room-skirting: #f7f5f1;
  --room-leaf: #7c8a6c;
  --room-leaf-dark: #5f6c53;
  --room-screen: #2b2e31;
  --room-glass: #8e9e96;
  --room-play: #c8ad7f;
  --room-play-cool: #98a8b0;
  --room-book: #a0846a;
  --room-book-dark: #6e5a4c;
  --room-edge: rgba(32, 30, 29, 0.16);

  /* Layout */
  --page-max: 1200px;
  --page-gutter: 40px;
  --page-pad: max(var(--page-gutter), calc((100% - var(--page-max)) / 2 + var(--page-gutter)));
  --rule: 2px solid var(--color-divider);
}

/* A 40px gutter leaves too little for the header's own contents on a phone:
   the brand, the menu toggle, and the three icon buttons together need more
   than a 390px viewport minus 80px of padding, and the page ends up scrolling
   sideways. */
@media (max-width: 700px) {
  :root { --page-gutter: 20px; }
}

/* Dark theme. Set by the server from the osoro-theme cookie, so the correct
   palette is in the first byte of HTML and never flashes. Every value the
   theme changes is also defined on bare :root above, because a colour that
   exists only in here would have no value at all if the attribute were ever
   absent. */
html[data-theme="dark"] {
  --color-bg: #191817;
  --color-surface: #232120;
  --color-text: #f0eeec;
  --color-divider: color-mix(in srgb, #f0eeec 40%, transparent);

  /* The field does not move. Only the ink does, and it moves a long way:
     #1b5183 on this ground is 2.15, which is not a colour, it is a hole. */
  --color-accent-ink: #84afdc;
  --color-accent-hover: #2f6397;
  --color-accent-press: #4375a7;

  --color-neutral-100: #2d2b2b;
  --color-neutral-200: #444141;
  --color-neutral-300: #605d5d;
  --color-neutral-400: #7d7979;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #bab6b6;
  --color-neutral-700: #d7d3d3;
  --color-neutral-800: #eae7e7;
  --color-neutral-900: #f8f4f4;

  --color-accent-100: #0a2d4d;
  --color-accent-200: #0a4475;
  --color-accent-300: #1b609e;
  --color-accent-400: #387ec1;
  --color-accent-500: #619dda;
  --color-accent-600: #619dda;
  --color-accent-700: #90bce9;
  --color-accent-800: #bdd7f4;
  --color-accent-900: #dbeaf9;

  --control-bg: var(--color-surface);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 3px 10px rgba(0, 0, 0, .55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .6);
}