/* ---------------------------------------------------------------------------
   Design tokens.

   Three theme states, in this order:
     1. bare :root                  -> the complete light palette
     2. prefers-color-scheme: dark  -> the system default, guarded so an
                                       explicit light choice still wins
     3. [data-theme="dark"]         -> the explicit toggle

   Only tokens are redefined per theme. Components always read tokens, never
   literals, so nothing can end up painting one theme's text on the other
   theme's background.
   --------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Surfaces and ink.
     The neutral ramp carries a slight teal cast, chosen to sit with the accent
     rather than a stock grey. */
  --bg:            #f4f7f6;
  --bg-sunken:     #e9efed;
  --surface:       #ffffff;
  --surface-2:     #f0f4f3;
  --surface-3:     #e4ecea;
  --border:        #d5dfdc;
  --border-strong: #b4c4c0;
  --text:          #11201f;
  --text-muted:    #556764;
  --text-faint:    #7c8d8a;
  --text-inverse:  #f4f7f6;

  /* Accent: one colour, for primary action and focus only. */
  --accent:        #0c6b63;
  --accent-hover:  #095852;
  --accent-active: #074743;
  --accent-fg:     #ffffff;
  --accent-soft:   #dcedeb;
  --accent-line:   #9dc9c4;

  /* Semantic: reserved for meaning, never decoration. */
  --success:       #16794c;
  --success-soft:  #dcf0e5;
  --success-line:  #a5d4bb;
  --warning:       #8f5605;
  --warning-soft:  #faeed7;
  --warning-line:  #e0c087;
  --danger:        #b0241d;
  --danger-soft:   #fbe4e2;
  --danger-line:   #eba9a4;
  --info:          #1c5ea6;
  --info-soft:     #dde9f8;
  --info-line:     #a8c6ea;

  /* Signer colour-coding: eight distinct hues, always paired with the signer's
     name — colour is never the only signal. */
  --sig1: #0c6b63; --sig1-soft: #dcedeb; --sig1-line: #9dc9c4;
  --sig2: #1c5ea6; --sig2-soft: #dde9f8; --sig2-line: #a8c6ea;
  --sig3: #8f5605; --sig3-soft: #faeed7; --sig3-line: #e0c087;
  --sig4: #16794c; --sig4-soft: #dcf0e5; --sig4-line: #a5d4bb;
  --sig5: #6d3fa8; --sig5-soft: #ece2f8; --sig5-line: #c9b3e8;
  --sig6: #a52a6e; --sig6-soft: #f8e0ed; --sig6-line: #e5a8c9;
  --sig7: #47606c; --sig7-soft: #e1e9ec; --sig7-line: #afc4cc;
  --sig8: #b0501d; --sig8-soft: #fbe7dc; --sig8-line: #ecb69d;

  --shadow-sm: 0 1px 2px rgb(17 32 31 / 6%), 0 1px 1px rgb(17 32 31 / 4%);
  --shadow-md: 0 2px 4px rgb(17 32 31 / 5%), 0 8px 20px rgb(17 32 31 / 7%);
  --shadow-lg: 0 4px 8px rgb(17 32 31 / 6%), 0 24px 48px rgb(17 32 31 / 12%);
  --scrim:     rgb(17 32 31 / 46%);

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.625rem;
  --fs-2xl:  2.125rem;

  /* 4px base. Every margin, padding and gap is a multiple of it. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 180ms;

  --shell-max: 1200px;
  --header-h: 60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            #0d1413;
    --bg-sunken:     #080e0d;
    --surface:       #151f1e;
    --surface-2:     #1c2827;
    --surface-3:     #243130;
    --border:        #293634;
    --border-strong: #3b4b48;
    --text:          #e6edeb;
    --text-muted:    #a0b2ae;
    --text-faint:    #7e918d;
    --text-inverse:  #0d1413;

    --accent:        #46b8a6;
    --accent-hover:  #5cc9b8;
    --accent-active: #6fd6c5;
    --accent-fg:     #062522;
    --accent-soft:   #14332f;
    --accent-line:   #2c5f58;

    --success:       #55c384;
    --success-soft:  #12301f;
    --success-line:  #2b5b3e;
    --warning:       #e0a458;
    --warning-soft:  #332512;
    --warning-line:  #5f4622;
    --danger:        #f0857b;
    --danger-soft:   #3a1a17;
    --danger-line:   #6b322c;
    --info:          #7fb2ee;
    --info-soft:     #142639;
    --info-line:     #2e4b6d;

    --sig1: #46b8a6; --sig1-soft: #14332f; --sig1-line: #2c5f58;
    --sig2: #7fb2ee; --sig2-soft: #142639; --sig2-line: #2e4b6d;
    --sig3: #e0a458; --sig3-soft: #332512; --sig3-line: #5f4622;
    --sig4: #55c384; --sig4-soft: #12301f; --sig4-line: #2b5b3e;
    --sig5: #b391e8; --sig5-soft: #261a39; --sig5-line: #4c3a6d;
    --sig6: #e88fc0; --sig6-soft: #391a2b; --sig6-line: #6d3453;
    --sig7: #9cb8c4; --sig7-soft: #1a2830; --sig7-line: #3a4f5a;
    --sig8: #e89a70; --sig8-soft: #33200f; --sig8-line: #66401f;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 34%), 0 8px 20px rgb(0 0 0 / 34%);
    --shadow-lg: 0 4px 8px rgb(0 0 0 / 36%), 0 24px 48px rgb(0 0 0 / 46%);
    --scrim:     rgb(3 8 7 / 68%);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0d1413;
  --bg-sunken:     #080e0d;
  --surface:       #151f1e;
  --surface-2:     #1c2827;
  --surface-3:     #243130;
  --border:        #293634;
  --border-strong: #3b4b48;
  --text:          #e6edeb;
  --text-muted:    #a0b2ae;
  --text-faint:    #7e918d;
  --text-inverse:  #0d1413;

  --accent:        #46b8a6;
  --accent-hover:  #5cc9b8;
  --accent-active: #6fd6c5;
  --accent-fg:     #062522;
  --accent-soft:   #14332f;
  --accent-line:   #2c5f58;

  --success:       #55c384;
  --success-soft:  #12301f;
  --success-line:  #2b5b3e;
  --warning:       #e0a458;
  --warning-soft:  #332512;
  --warning-line:  #5f4622;
  --danger:        #f0857b;
  --danger-soft:   #3a1a17;
  --danger-line:   #6b322c;
  --info:          #7fb2ee;
  --info-soft:     #142639;
  --info-line:     #2e4b6d;

  --sig1: #46b8a6; --sig1-soft: #14332f; --sig1-line: #2c5f58;
  --sig2: #7fb2ee; --sig2-soft: #142639; --sig2-line: #2e4b6d;
  --sig3: #e0a458; --sig3-soft: #332512; --sig3-line: #5f4622;
  --sig4: #55c384; --sig4-soft: #12301f; --sig4-line: #2b5b3e;
  --sig5: #b391e8; --sig5-soft: #261a39; --sig5-line: #4c3a6d;
  --sig6: #e88fc0; --sig6-soft: #391a2b; --sig6-line: #6d3453;
  --sig7: #9cb8c4; --sig7-soft: #1a2830; --sig7-line: #3a4f5a;
  --sig8: #e89a70; --sig8-soft: #33200f; --sig8-line: #66401f;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 34%), 0 8px 20px rgb(0 0 0 / 34%);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 36%), 0 24px 48px rgb(0 0 0 / 46%);
  --scrim:     rgb(3 8 7 / 68%);
}