/* FCRF design tokens for the Auction Workspace: the ONE place colours, type, sizes, shape and motion are set.
   Every other rule reads these variables, so a change here changes the whole workspace.
   Source: research/design-system.md (the theme's css/tokens.css and the design-system repo; dark from api-doc.css).
   Values marked P are proposals where FCRF has no token of its own.

   Light by default; dark follows the computer's setting; a person can force either (data-theme on <html>,
   set from the ⚙ menu and kept in this browser). */

:root {
  /* ---- surfaces */
  --bg: #F6F7FB;            /* the page */
  --panel: #FFFFFF;         /* cards, panels */
  --soft: #F3F5FA;          /* sunken areas, table heads, hovers */
  --raised: #FAFBFE;
  --line: #E3E6F0;          /* hairlines */
  --line-strong: #BDC3D7;   /* field underlines, control borders */
  --hover: #EEF0F6;

  /* ---- ink */
  --fg: #0D1949;            /* navy ink */
  --head: #182960;          /* headings */
  --text: #333C5C;          /* long copy */
  --muted: #5F6B92;
  --placeholder: #939CBC;

  /* ---- brand */
  --navy: #181F37;
  --accent: #B79259;        /* FCRF gold: fills, rules, focus, the active underline */
  --accent-hover: #D5B482;
  --accent-active: #A88651;
  --accent-ink: #8A6A22;    /* gold for text and links (readable on white) */
  --accent-strong: #8F7030; /* gold under white text */
  --accent-soft: #FBF1E1;
  --on-accent: #FFFFFF;
  --selected: #181F37;      /* a pressed segment */
  --on-selected: #FFFFFF;
  --topbar: #181F37;
  --on-topbar: rgba(255, 255, 255, .78);
  --on-topbar-strong: #FFFFFF;

  /* ---- status */
  --ok: #198754;    --ok-soft: #E3F1EA;
  --bad: #C62F2F;   --bad-soft: #F8E6E6;   --bad-line: #F34444;
  --warn: #B45309;  --warn-soft: #F6EAE1;  /* P */
  --info: #2F5C8A;  --info-soft: #E6EBF1;  /* P */
  --remark: #E00000;                       /* the articles' red Quality Remark */
  --mark: rgba(242, 201, 76, .45);         /* a commented passage */
  --mark-strong: rgba(242, 153, 74, .55);  /* the passage being looked at */
  --mark-soft: rgba(242, 201, 76, .18);
  --mark-line: #E0A800;
  --on-solid: #FFFFFF;                     /* text on a solid status or gold fill */
  /* one mark colour per house, for the calendar (mid tones, read on light and dark) */
  --house-christies: #C8102E;  --house-sothebys: #3B6FB6;  --house-phillips: #7A5AA6;  --house-bonhams: #2E8B7A;
  --photo-bg: #FFFFFF;                     /* behind catalogue photos (they are shot on white) */
  --media-bg: #000000;                     /* behind video */

  /* ---- type: Montserrat is the interface (text, headings, buttons, fields). Cinzel is the brand's display face and
     appears only in rare, special places: the home greeting and the sign-in screen (the design system's
     "splash / banner" use). */
  --display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --brand-serif: "Cinzel", Georgia, serif;
  --body: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --mono: "Montserrat", "Segoe UI", system-ui, sans-serif;  /* FCRF has no monospace: numbers use tabular figures */
  --fs-xs: 11px;  --fs-sm: 12.5px;  --fs-md: 14px;  --fs-lg: 16px;  --fs-xl: 20px;  --fs-2xl: 26px;  --fs-3xl: 34px;
  --ls-caps: .08em;         /* uppercase labels and buttons */
  --ls-head: .02em;

  /* ---- space, shape, depth, motion */
  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;  --s5: 24px;  --s6: 32px;  --s7: 48px;
  --r-control: 4px;  --r-sm: 3px;  --r-card: 8px;  --r-lg: 12px;  --r-pill: 100px;
  --shadow: 0 1px 2px rgba(13, 25, 73, .06), 0 1px 3px rgba(13, 25, 73, .06);
  --shadow-raised: 0 1px 3px rgba(13, 25, 73, .05), 0 18px 50px rgba(13, 25, 73, .11);
  --shadow-modal: 0 24px 60px rgba(13, 25, 73, .22);
  --backdrop: rgba(13, 25, 73, .45);
  --ring: 0 0 0 3px rgba(183, 146, 89, .35);
  --t-fast: .15s;  --t: .2s;  --t-slow: .3s;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --field-h: 40px;
  --wrap: 1240px;

  color-scheme: light;
}

/* ---- dark: the API documentation page's palette; the gold stays */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0B1020;  --panel: #131A2E;  --soft: #1A2238;  --raised: #161E33;
  --line: #232C46;  --line-strong: #2E3855;  --hover: #1E2740;
  --fg: #E7EBF7;  --head: #F2F5FF;  --text: #C2CAE2;  --muted: #8B96B8;  --placeholder: #6C769A;
  --accent-ink: #E0B978;  --accent-soft: rgba(183, 146, 89, .16);  --on-accent: #1B1205;  --accent-strong: #C9A468;
  --selected: #B79259;  --on-selected: #1B1205;
  --topbar: rgba(11, 16, 32, .9);  --on-topbar: #AEB9D8;  --on-topbar-strong: #F2F5FF;
  --ok: #7FD1A5;  --ok-soft: rgba(25, 135, 84, .22);
  --bad: #F0A3A3;  --bad-soft: rgba(243, 68, 68, .16);
  --warn: #F2A65A;  --warn-soft: rgba(242, 166, 90, .16);
  --info: #9DB6E0;  --info-soft: rgba(111, 143, 207, .20);
  --remark: #FF6B6B;  --mark: rgba(242, 201, 76, .28);  --on-solid: #0B1020;
  --shadow: none;  --shadow-raised: 0 0 0 1px #232C46;  --shadow-modal: 0 24px 60px rgba(0, 0, 0, .5);
  --backdrop: rgba(6, 11, 28, .7);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #0B1020;  --panel: #131A2E;  --soft: #1A2238;  --raised: #161E33;
  --line: #232C46;  --line-strong: #2E3855;  --hover: #1E2740;
  --fg: #E7EBF7;  --head: #F2F5FF;  --text: #C2CAE2;  --muted: #8B96B8;  --placeholder: #6C769A;
  --accent-ink: #E0B978;  --accent-soft: rgba(183, 146, 89, .16);  --on-accent: #1B1205;  --accent-strong: #C9A468;
  --selected: #B79259;  --on-selected: #1B1205;
  --topbar: rgba(11, 16, 32, .9);  --on-topbar: #AEB9D8;  --on-topbar-strong: #F2F5FF;
  --ok: #7FD1A5;  --ok-soft: rgba(25, 135, 84, .22);
  --bad: #F0A3A3;  --bad-soft: rgba(243, 68, 68, .16);
  --warn: #F2A65A;  --warn-soft: rgba(242, 166, 90, .16);
  --info: #9DB6E0;  --info-soft: rgba(111, 143, 207, .20);
  --remark: #FF6B6B;  --mark: rgba(242, 201, 76, .28);  --on-solid: #0B1020;
  --shadow: none;  --shadow-raised: 0 0 0 1px #232C46;  --shadow-modal: 0 24px 60px rgba(0, 0, 0, .5);
  --backdrop: rgba(6, 11, 28, .7);
  color-scheme: dark;
}