/* FCB OS design system: foundations.
   Every colour, size and radius used by components.css is named here.
   Values come from the Claude Design prototype (design/claude-design/FCB OS.dc.html).
   Change a value here, never inside a component. */

:root {
  /* Type */
  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-meta: 13px;      /* labels, counts, card meta */
  --fs-small: 14px;     /* secondary lines, tags */
  --fs-body: 15px;      /* default; never go below this for running text */
  --fs-body-lg: 16px;   /* descriptions, field values */
  --fs-row-lg: 17px;    /* the rows that must be seen first (late, today) */
  --fs-lede: 18px;      /* one-sentence summaries */
  --fs-question: 20px;  /* a decision, as one sentence */
  --fs-title-sm: 26px;  /* title inside a panel */
  --fs-title: 28px;     /* title of a working screen (Board, Clients) */
  --fs-title-lg: 32px;  /* title of a reading screen (Today, Decisions, a client) */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Text */
  --ink: #1B0A3A;         /* titles and main text */
  --text: #3A3050;        /* longer running text */
  --text-soft: #4A4160;   /* secondary text, quiet buttons */
  --text-muted: #5E5873;  /* labels and meta; 6:1 on the page colour */

  /* Surfaces */
  --page: #F5F1FF;
  --surface: #FFFFFF;
  --surface-soft: #FBF9FF;   /* navigation, side lists, panel side */
  --surface-inset: #FAF8FF;  /* a block opened inside a card */
  --well: #EEE9FB;           /* board column */
  --well-over: #E6DCFF;      /* board column while a card is dragged over it */
  --hover: #EFE9FF;
  --hover-row: rgba(138, 92, 255, 0.06);
  --skeleton: #EEE9FA;
  --scrim: rgba(27, 10, 58, 0.2);

  /* Lines */
  --line: #E7E1F5;
  --line-soft: #ECE6F7;
  --line-faint: #F0ECF8;
  --line-field: #DDD5EE;

  /* Action (violet): the thing to press, the selected item, "your move" */
  --accent: #8A5CFF;
  --accent-solid: #7346EB;        /* filled button; white text passes 4.5:1 */
  --accent-solid-hover: #6234DE;
  --accent-text: #5B2FD6;         /* links and quiet buttons */
  --accent-line: #CDBDF7;

  /* Meaning colours. One meaning each, everywhere. Always shown with a word or a shape.
     fg = text, bg = tag background, mk = marker, box/line/rule = a whole group in that tone. */
  --late-fg: #B42318;   --late-bg: #FDECEC;   --late-mk: #D92D20;
  --late-box: #FFF7F6;  --late-line: #F5D5D2; --late-rule: #F5DEDB;

  --today-fg: #8A4B00;  --today-bg: #FEF0D7;  --today-mk: #E08A00;
  --today-box: #FFFBF3; --today-line: #F2E2C2; --today-rule: #F4E6CB;

  --action-fg: #5B2FD6; --action-bg: #EFE9FF; --action-mk: #8A5CFF; --action-line: #CDBDF7;
  --wait-fg: #1F56B0;   --wait-bg: #E7EFFD;   --wait-mk: #2E6FD8;   --wait-line: #C7D8F6;
  --done-fg: #1E7A43;   --done-bg: #E4F5EA;   --done-mk: #2F9E5B;
  --none-fg: #5E5873;   --none-bg: #F1EEF6;   --none-mk: #9C95AE;

  /* Space. Use these steps only. */
  --sp-2: 2px;  --sp-4: 4px;   --sp-6: 6px;   --sp-8: 8px;   --sp-10: 10px;
  --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-28: 28px;
  --sp-32: 32px; --sp-40: 40px; --sp-52: 52px; --sp-96: 96px;

  /* Corners */
  --r-tag: 6px;       /* due label on a card */
  --r-control: 10px;  /* buttons, fields, rows, board cards */
  --r-box: 14px;      /* a box of rows, a board column */
  --r-card: 16px;     /* a decision */
  --r-pill: 999px;

  /* Controls: nothing people press is lower than 40px */
  --h-control: 40px;
  --h-control-lg: 44px;
  --h-action: 48px;

  /* Layout */
  --w-nav: 236px;
  --w-list: 300px;
  --w-col: 220px;
  --w-read: 940px;        /* Today */
  --w-read-narrow: 820px; /* Decisions, a client */
  --w-panel: 880px;

  --shadow-toast: 0 4px 18px rgba(27, 10, 58, 0.16);
  --focus: 2px solid var(--accent);

  /* Tone in use. Set by data-tone on an element and inherited by what is inside it. */
  --tone-fg: var(--text-soft);
  --tone-strong: var(--ink);
  --tone-bg: transparent;
  --tone-mk: #8E86A3;
  --tone-box: var(--surface);
  --tone-line: var(--line-soft);
  --tone-rule: var(--line-faint);
}

[data-tone="plain"] {
  --tone-fg: var(--text-soft); --tone-strong: var(--ink); --tone-bg: transparent; --tone-mk: #8E86A3;
  --tone-box: var(--surface); --tone-line: var(--line-soft); --tone-rule: var(--line-faint);
}
[data-tone="late"] {
  --tone-fg: var(--late-fg); --tone-strong: var(--late-fg); --tone-bg: var(--late-bg); --tone-mk: var(--late-mk);
  --tone-box: var(--late-box); --tone-line: var(--late-line); --tone-rule: var(--late-rule);
}
[data-tone="today"] {
  --tone-fg: var(--today-fg); --tone-strong: var(--today-fg); --tone-bg: var(--today-bg); --tone-mk: var(--today-mk);
  --tone-box: var(--today-box); --tone-line: var(--today-line); --tone-rule: var(--today-rule);
}
[data-tone="action"] {
  --tone-fg: var(--action-fg); --tone-strong: var(--action-fg); --tone-bg: var(--action-bg); --tone-mk: var(--action-mk);
  --tone-box: var(--action-bg); --tone-line: var(--action-line); --tone-rule: var(--line-faint);
}
[data-tone="wait"] {
  --tone-fg: var(--wait-fg); --tone-strong: var(--wait-fg); --tone-bg: var(--wait-bg); --tone-mk: var(--wait-mk);
  --tone-box: var(--wait-bg); --tone-line: var(--wait-line); --tone-rule: var(--line-faint);
}
[data-tone="done"] {
  --tone-fg: var(--done-fg); --tone-strong: var(--done-fg); --tone-bg: var(--done-bg); --tone-mk: var(--done-mk);
  --tone-box: var(--surface); --tone-line: var(--line-soft); --tone-rule: var(--line-faint);
}
[data-tone="none"] {
  --tone-fg: var(--none-fg); --tone-strong: var(--none-fg); --tone-bg: var(--none-bg); --tone-mk: var(--none-mk);
  --tone-box: var(--surface); --tone-line: var(--line-soft); --tone-rule: var(--line-faint);
}