/* ═══════════════════════════════════════════════════════════════
   THEME — Warm Paper
   ═══════════════════════════════════════════════════════════════
   This file is the ENTIRE surface a theme controls. Every colour,
   font, radius and shadow in the app resolves to something here.

   To make a new theme: copy this file, change the values, done.
   You never touch structure.css — no layout, spacing, or behaviour
   lives in a theme.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Ink */
  --ink:             hsl(24 10% 10%);
  --ink-secondary:   hsl(24 8% 25%);
  --ink-muted:       hsl(24 8% 32%);
  --ink-label:       hsl(24 8% 38%);
  --ink-icon:        hsl(24 8% 45%);

  /* Surfaces */
  --bg:              hsl(34 20% 97%);
  --surface:         #ffffff;
  --panel:           hsl(34 19% 95.5%);
  --surface-settled: hsl(0 0% 100% / 0.5);  /* finished cards — washed back */
  --panel-footer:    hsl(34 17% 93.5%);

  /* Accent */
  --accent:          #1E3A5F;
  --accent-hover:    #16293F;
  --accent-tint:     hsl(215 40% 96%);
  --accent-tint-border: hsl(215 40% 84%);
  --danger:          #A6412E;

  /* Lines */
  --hairline:        hsl(24 10% 10% / 0.06);
  --rule:            hsl(24 10% 10% / 0.1);   /* modal header divider */
  --hairline-strong: hsl(24 10% 10% / 0.08);

  /* Type */
  --font-heading: 'Times New Roman', Times, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Shape */
  --radius: 6px;

  /* Depth */
  --shadow-card:       0 1px 2px hsl(24 10% 10% / 0.04), 0 4px 14px hsl(24 10% 10% / 0.04);
  --shadow-card-hover: 0 2px 4px hsl(24 10% 10% / 0.05), 0 10px 26px hsl(24 10% 10% / 0.08);
  /* Settled cards — one flat shadow instead of the two-part lift, so the
     card sits ON the column rather than above it. */
  --shadow-card-flat:  0 1px 2px hsl(24 10% 10% / 0.03);
  /* Sheets inside a modal — the white regions you read or author,
     sitting on the panel ground. Lighter than a card's lift. */
  --shadow-sheet:      0 1px 2px hsl(24 10% 10% / 0.05), 0 4px 12px hsl(24 10% 10% / 0.06);
  --shadow-col:        0 2px 4px hsl(24 10% 10% / 0.07), 0 8px 18px hsl(24 10% 10% / 0.09), 0 20px 44px hsl(24 10% 10% / 0.10);
  --shadow-btn:        0 1px 2px hsl(215 52% 24% / 0.18), 0 5px 16px hsl(215 52% 24% / 0.16);
  --shadow-popup:      0 2px 4px hsl(24 10% 10% / 0.06), 0 12px 30px hsl(24 10% 10% / 0.08);

  /* Sidebar — product chrome. Deliberately not paper-toned: it
     frames the app rather than being board content. */
  --sidebar-bg:          #1E3A5F;
  --sidebar-text:        hsl(215 22% 82%);
  --sidebar-text-active: #ffffff;
  --sidebar-hover:       hsl(215 40% 26%);
  --sidebar-border:      hsl(0 0% 100% / 0.14);

  /* Column tints — FREE: each workspace assigns which tint to which
     column; the palette itself belongs to the theme. */
  --col-1: hsl(215 22% 95.5%);
  --col-2: hsl(45 34% 95%);
  --col-3: hsl(140 16% 95.5%);
  --col-4: hsl(8 26% 96%);
  /* --col-5 was hsl(34 19% 95.5%) — the SAME value as --panel, so the
     fifth column had no tint at all: it rendered as the board ground
     with a border round it. Product Development is the only workspace
     with five columns, so it was the only place this showed, and it is
     why its Production column has always read as a different kind of
     surface beside the other four. The five are a CYCLE; a member equal
     to the ground is a gap in it, not a member. */
  --col-5: hsl(265 18% 96%);

  /* Overlays — translucent washes used for hover and pressed states.
     Tokenised so a dark theme can invert them. */
  --wash-ink:        hsl(24 10% 10% / 0.06);   /* hover on a light surface */
  --wash-ink-strong: hsl(24 10% 10% / 0.2);    /* ghost button hover border */
  --wash-light:      hsl(0 0% 100% / 0.035);   /* subtle, on the navy nav */
  --wash-light-2:    hsl(0 0% 100% / 0.07);
  --wash-light-3:    hsl(0 0% 100% / 0.11);

  /* On-accent text — sits on the filled button and the nav */
  --on-accent: #fff;

  /* Card accent fallback when a card has no colour of its own */
  --card-accent-default: hsl(24 6% 62%);

  /* Status tones — the pill colours. Meaning, not decoration, but a
     theme still needs to be able to retune them. */
  --warn-bg:   hsl(45 60% 90%);
  --warn-ink:  #8a5a0b;
  --ok-ink: #3d6b40;

  /* The five pill tones, named by MEANING not by board. Task, Invoices
     and Product Dev each had their own hardcoded hexes for the same five
     ideas — a theme could not touch any of them. Now every pill on every
     board resolves to one of these. */
  --tone-neutral-bg: hsl(34 17% 93.5%);  --tone-neutral-ink: hsl(24 8% 32%);
  --tone-info-bg:    hsl(215 40% 92%);   --tone-info-ink:    #1E3A5F;
  --tone-good-bg:    hsl(140 25% 91%);   --tone-good-ink:    #3d6b40;
  --tone-warn-bg:    hsl(45 60% 90%);    --tone-warn-ink:    #8a5a0b;
  --tone-bad-bg:     hsl(8 45% 93%);     --tone-bad-ink:     #A6412E;
  --overlay-ink: hsl(24 10% 10% / 0.42);
  --shadow-modal-v: 0 2px 4px hsl(24 10% 10% / 0.06), 0 12px 30px hsl(24 10% 10% / 0.08), 0 30px 70px hsl(24 10% 10% / 0.10);

  /* Group folder panel, painted behind the blocks */
  /* Deliberately DARKER than --col-1 (the Projects column, 95.5% L)
     that it sits inside. A group is a container holding cards; it has
     to read as a recess in the column, not a lighter patch on it. */
  --group-panel:        hsl(215 30% 90%);
  --group-panel-border: hsl(215 32% 78%);
}