/* Design tokens, the single definition of Orchestra's visual language.
 *
 * Extracted from the two hand-styled templates that previously duplicated
 * this palette. Nothing else in the codebase may hard-code a colour.
 *
 * The brief: practical and clean. Dense, information-first, built for people
 * who have it open all day, not for a screenshot.
 */

:root {
  /* Ink and ground.
   *
   * Three planes, and every element belongs to exactly one. The sidebar, the
   * topbar and every panel were all `--card`, so the frame of the app and the
   * work inside it sat on the same surface and the whole thing read flat.
   *
   *   --chrome  the frame:  sidebar and topbar, the parts that never scroll
   *   --bg      the desk:   what panels are laid on
   *   --card    the sheet:  panels, rows, anything holding content
   *
   * Light comes from above, so the ladder runs darkest at the frame to
   * lightest at the sheet. It is the same logic as paper on a desk, which is
   * the thing this tool replaced. */
  --ink: #16181d;
  --ink-soft: #3d4250;
  --muted: #6b7280;
  --rule: #e5e7eb;
  --rule-strong: #d1d5db;
  --chrome: #eaedf2;
  --bg: #f4f6f9;
  --card: #ffffff;
  --hover: #f3f4f6;
  --sunken: #fafbfc;

  /* One accent, carried over from the existing dashboard */
  --accent: #1f4ed8;
  --accent-soft: #eef2ff;
  --accent-ink: #1e40af;

  /* Tapestry's own marks, sampled from the letterhead artwork.
   *
   * These are the company's colours, not the interface's: they belong to
   * anything a client sees with our name on it, and must not drift into the
   * app chrome, which has its own accent above. They do not invert in dark
   * mode either, a brand navy that lightens itself is no longer the brand. */
  --brand-navy: #34407c;
  --brand-navy-ink: #ffffff;
  --brand-rule: #b2b2b2;

  /* Semantic, used by status pills and result banners */
  --ok: #047857;
  --ok-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --info: #0e7490;
  --info-soft: #ecfeff;

  /* Type. 14px chrome, 13px in tables: more rows on screen without strain.
     IBM Plex is self-hosted (see fonts.css); the system stack behind it means
     a failed font file degrades rather than breaks. */
  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 0.6875rem;   /* 11px, table headers, pills */
  --fs-sm: 0.8125rem;   /* 13px, table body */
  --fs-base: 0.875rem;  /* 14px, chrome */
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;

  /* Spacing, an 8px scale with a 4px half-step */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  --radius: 0.375rem;
  --radius-sm: 0.25rem;
  --radius-pill: 999px;

  /* Elevation. There were none of these: one overlay shadow for modals and
   * nothing else in the app, so a panel was a rectangle with a hairline round
   * it and no sense of sitting on anything.
   *
   * Two steps is the whole vocabulary. A tool people have open all day does
   * not want things floating; it wants to know what is a surface and what is
   * on top of one. */
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 5%), 0 1px 3px rgb(16 24 40 / 4%);
  --shadow-md: 0 2px 4px -1px rgb(16 24 40 / 6%), 0 8px 20px -6px rgb(16 24 40 / 12%);
  --shadow-overlay: 0 8px 24px rgb(16 24 40 / 12%);

  /* The lit top edge of a raised surface. Barely there in light, and doing
   * most of the work in dark, where a black shadow on a dark panel is
   * invisible and the only way to say "this is raised" is to catch the light
   * along its top. */
  --edge: inset 0 1px 0 rgb(255 255 255 / 60%);

  /* The counterpart: a field is cut into the surface rather than laid on it. */
  --inset: inset 0 1px 2px rgb(16 24 40 / 6%);

  /* The ruled ground behind the sign-in screen. A job book replaced a
     filing cabinet, so the front door is ledger paper rather than a
     gradient. */
  --grid-line: rgb(16 24 40 / 4%);
  /* The edge of a table that has more to the right of it. */
  --shadow-scroll: rgb(16 24 40 / 16%);
  --focus: 0 0 0 3px rgb(31 78 216 / 30%);

  /* Capped deliberately, this is a tool, not a presentation */
  --speed: 120ms;

  /* One height for every control that takes a value: input, select, textarea
     and the buttons that sit in a row with them. A select drawn by the
     operating system and an input drawn by us disagreed by two or three
     pixels, which is exactly enough to read as sloppy in a filter bar. */
  --control-h: 2.1rem;

  --nav-w: 13rem;
  --topbar-h: 3.25rem;

  /* Page widths. Three intents, and every page picks exactly one, see the
     header of layout.css. Never hard-code a width on a panel. */
  --w-narrow: 46rem;   /* forms and reading: one column of thought */
  --w-page: 90rem;     /* the working width, every page but a form */

  /* One gutter, used by the page and by the topbar so they line up. It grows
     with the viewport instead of stranding content against the left edge. */
  --gutter: clamp(1rem, 2.2vw, 2rem);
}

/* Cheap to add now, expensive to retrofit later. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e7e9ee;
    --ink-soft: #b6bcc9;
    --muted: #8b93a3;
    --rule: #2a2f3a;
    --rule-strong: #3a414f;
    /* Dark mode gets its depth from lightness, not from shadow: a black
     * shadow on a near-black panel is invisible, and every attempt to fix
     * flatness with a stronger drop shadow here is wasted. So the three
     * planes are stepped further apart than they are in light, and the lit
     * top edge below does the rest.
     *
     * They used to be #14161b, #1b1e25, seven values apart, which reads as
     * one surface with a line drawn on it. */
    --chrome: #0c0e12;
    --bg: #111318;
    --card: #1e222a;
    --hover: #272c36;
    --sunken: #171a20;

    --accent: #6b93ff;
    --accent-soft: #1d2740;
    --accent-ink: #a8c0ff;

    --ok: #4ade80;
    --ok-soft: #12281e;
    --warn: #fbbf24;
    --warn-soft: #2a2113;
    --danger: #f87171;
    --danger-soft: #2c1618;
    --info: #67e8f9;
    --info-soft: #10262b;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 30%);
    --shadow-md: 0 2px 4px -1px rgb(0 0 0 / 30%), 0 8px 20px -6px rgb(0 0 0 / 45%);
    --shadow-overlay: 0 8px 24px rgb(0 0 0 / 45%);
    /* Carrying most of the weight here, so it is set well above its light
     * counterpart in perceived strength rather than in value. */
    --edge: inset 0 1px 0 rgb(255 255 255 / 11%);
    --inset: inset 0 1px 2px rgb(0 0 0 / 30%);
    --grid-line: rgb(255 255 255 / 3%);
    /* Light, not dark: a black shadow on a dark panel is invisible. */
    --shadow-scroll: rgb(255 255 255 / 16%);
  }
}

/* --- Paper ------------------------------------------------------------- *
 *
 * A document we put our name on and send to a client is not an app screen,
 * and must not follow the reader's dark-mode preference: an estimate has to
 * look the same on their machine as it does on ours, and the same on screen
 * as it does on paper. So the light values are pinned here rather than
 * inherited, and this block deliberately has no dark-mode counterpart.
 */

.paper {
  color-scheme: light;

  --ink: #16181d;
  --ink-soft: #3d4250;
  --muted: #6b7280;
  --rule: #e5e7eb;
  --rule-strong: #d1d5db;
  --bg: #f6f7f9;
  --card: #ffffff;
  --hover: #f3f4f6;
  --sunken: #fafbfc;

  --accent: #1f4ed8;
  --accent-soft: #eef2ff;
  --accent-ink: #1e40af;

  --ok: #047857;
  --ok-soft: #ecfdf5;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;

  /* Pinned like the rest: a client's dark mode must not put a white glow
     down the edge of a table on our letterhead, nor a heavy black shadow
     under a panel on what is meant to read as a printed page. */
  --shadow-scroll: rgb(16 24 40 / 16%);
  --shadow-sm: 0 1px 2px rgb(16 24 40 / 5%), 0 1px 3px rgb(16 24 40 / 4%);
  --shadow-md: 0 2px 4px -1px rgb(16 24 40 / 6%), 0 8px 20px -6px rgb(16 24 40 / 12%);
  --edge: inset 0 1px 0 rgb(255 255 255 / 60%);
  --inset: inset 0 1px 2px rgb(16 24 40 / 6%);
  --chrome: #eaedf2;

  background: var(--bg);
  color: var(--ink);
}