/* mial v1 design tokens. Light values are the approved design
   (.chief-of-staff/mial-design-v1/DESIGN.md). Dark values are derived from
   the existing app's dark tokens (bg #1a1816, card #2A2724, panel #2E2C29,
   text #EDE9E3, gold #D4AD2E) and MUST each be checked for 4.5:1 text
   contrast by tests/test_v1_tokens_contrast.py before the flip. */
:root {
  color-scheme: light;
  --bg: #F6F2EC;
  --card: #FFFEFB;
  --card-border: #E7DFD2;
  --divider: #EFE8DC;
  --fill: #EFE8DC;
  --fill-2: #ECE5D9;
  --btn-border: #D9CFBF;

  --ink: #292521;
  --body: #3A352F;
  --body-2: #4A433C;
  --secondary: #5C554D;
  --secondary-2: #6B635A;
  --muted: #756D63;          /* kept or muted text only. DESIGN.md says #7D756B,
                                which is 4.498:1 on the card and 4.07:1 on the page;
                                this is the nearest value that passes 4.5:1 on both. */
  --on-ink: #FFFEFB;         /* text on primary buttons */

  --gold: #C9A227;           /* fills, dots, rings; never text */
  --gold-text: #6B520F;
  --gold-text-2: #5E480C;
  --gold-tint: #F3E6C0;
  --gold-soft: #F6EFDD;
  --gold-underline: #D4B550;

  --cool-text: #56636F;
  --cool-text-2: #3F4A55;
  --cool-tint: #E6EAEE;
  --cool-ring: #7F8C99;
  --cool-track: #E3E7EB;
  --cool-underline: #98A4B0;

  --late-text: #8F3A16;
  --late-text-2: #9E4320;
  --late-tint: #F6E2D8;
  --late-ring: #A8471E;

  --mark-ai-bg: #292521;
  --mark-ai-fg: #F3E6C0;
  --mark-tg-bg: #E3ECF4;
  --mark-tg-fg: #2F4A63;
  --mark-you-bg: #EFE8DC;
  --mark-you-fg: #5C554D;

  --shadow: 0 10px 28px -18px rgba(41,37,33,.28);
  --focus: #6B520F;

  --r-card: 20px;
  --r-sheet: 26px;
  --r-seg: 14px;
  --r-seg-inner: 10px;
  --r-tag: 6px;

  /* Added by the v1 screens build (values from the .dc.html sources). */
  --rail-bg: #FBF8F3;        /* laptop left rail */
  --warm-track: #EDE3CB;     /* the unfilled part of a warm ring */
  --icon-tile: #F1ECE3;      /* "last talked" icon tile */
  --story-rail: #EBE3D3;     /* the History timeline line */
  --circle-core: #FBF6EA;    /* the "this week" disc of Your circle */
  --circle-ring: #EAE3D6;
  --cool-line: #A3AEB9;      /* dashed line to a drifting person */
  --dir-theirs: #4F5B67;     /* "Owes you" label */
  --search-border: #E0D7C8;
  --input-border: #DCD2C1;
  --input-bg: #FFFFFF;
  --dashed-border: #CFC3AE;
  --grabber: #DDD5C8;
  --sheet-scrim: rgba(41,37,33,.32);
  --readback-bg: #F8F3E6;
  --readback-border: #EDE1C2;
  --btn-disabled-bg: #E9E3D8;
  --primary-bg: #292521;     /* primary buttons, selected chips and days */
  --on-gold: #292521;        /* text on the gold accent */
  --toast-bg: #292521;
  --toast-fg: #FFFEFB;
  --toast-undo: #E8C65A;
  --sel-shadow: 0 1px 2px rgba(41,37,33,.12);
  --nav-shadow: 0 10px 26px -16px rgba(41,37,33,.35);
  --fab-shadow: 0 10px 24px -12px rgba(122,95,18,.6);
  --toast-shadow: 0 12px 28px -12px rgba(41,37,33,.55);
  --sheet-shadow: 0 -16px 44px -20px rgba(41,37,33,.4);
  --pulse: rgba(201,162,39,.45);       /* the live dot's pulse */
  --pulse-clear: rgba(201,162,39,0);

  --font-ui: Figtree, 'Avenir Next', -apple-system, system-ui, sans-serif;
  --font-brand: Nunito, 'Avenir Next', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1a1816; --card: #2A2724; --card-border: #3A3632; --divider: #34302C;
    --fill: #2E2C29; --fill-2: #34312D; --btn-border: #46413B;
    --ink: #EDE9E3; --body: #DCD6CE; --body-2: #CFC8BF; --secondary: #BDB6AC;
    --secondary-2: #ADA59B; --muted: #9A938A; --on-ink: #1a1816;
    --gold: #D4AD2E; --gold-text: #E2C25A; --gold-text-2: #D9B84A;
    --gold-tint: #3A3220; --gold-soft: #332D21; --gold-underline: #B8962A;
    --cool-text: #AEBBC7; --cool-text-2: #C3CDD6; --cool-tint: #27303A;
    --cool-ring: #7F8C99; --cool-track: #2F363D; --cool-underline: #6F7C88;
    --late-text: #F0A07E; --late-text-2: #E8916C; --late-tint: #3A2620; --late-ring: #D46A3E;
    --mark-ai-bg: #EDE9E3; --mark-ai-fg: #5E480C; --mark-tg-bg: #22303D; --mark-tg-fg: #B9CCDD;
    --mark-you-bg: #34312D; --mark-you-fg: #CFC8BF;
    --shadow: 0 10px 28px -18px rgba(0,0,0,.6); --focus: #E2C25A;
    --rail-bg: #201E1B; --warm-track: #3A3424; --icon-tile: #34312D; --story-rail: #3A3632;
    --circle-core: #2F2A20; --circle-ring: #3A3632; --cool-line: #6F7C88; --dir-theirs: #AEBBC7;
    --search-border: #46413B; --input-border: #4A453F; --input-bg: #24211E; --dashed-border: #5A534C;
    --grabber: #4A453F; --sheet-scrim: rgba(0,0,0,.55); --readback-bg: #2F2A20; --readback-border: #4A4030;
    --btn-disabled-bg: #34312D; --primary-bg: #EDE9E3; --on-gold: #1a1816;
    --toast-bg: #3A3632; --toast-fg: #EDE9E3; --toast-undo: #E2C25A;
    --sel-shadow: 0 1px 2px rgba(0,0,0,.5); --nav-shadow: 0 10px 26px -16px rgba(0,0,0,.7);
    --fab-shadow: 0 10px 24px -12px rgba(0,0,0,.7); --toast-shadow: 0 12px 28px -12px rgba(0,0,0,.7);
    --sheet-shadow: 0 -16px 44px -20px rgba(0,0,0,.7);
    --pulse: rgba(212,173,46,.45); --pulse-clear: rgba(212,173,46,0);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1a1816; --card: #2A2724; --card-border: #3A3632; --divider: #34302C;
  --fill: #2E2C29; --fill-2: #34312D; --btn-border: #46413B;
  --ink: #EDE9E3; --body: #DCD6CE; --body-2: #CFC8BF; --secondary: #BDB6AC;
  --secondary-2: #ADA59B; --muted: #9A938A; --on-ink: #1a1816;
  --gold: #D4AD2E; --gold-text: #E2C25A; --gold-text-2: #D9B84A;
  --gold-tint: #3A3220; --gold-soft: #332D21; --gold-underline: #B8962A;
  --cool-text: #AEBBC7; --cool-text-2: #C3CDD6; --cool-tint: #27303A;
  --cool-ring: #7F8C99; --cool-track: #2F363D; --cool-underline: #6F7C88;
  --late-text: #F0A07E; --late-text-2: #E8916C; --late-tint: #3A2620; --late-ring: #D46A3E;
  --mark-ai-bg: #EDE9E3; --mark-ai-fg: #5E480C; --mark-tg-bg: #22303D; --mark-tg-fg: #B9CCDD;
  --mark-you-bg: #34312D; --mark-you-fg: #CFC8BF;
  --shadow: 0 10px 28px -18px rgba(0,0,0,.6); --focus: #E2C25A;
  --rail-bg: #201E1B; --warm-track: #3A3424; --icon-tile: #34312D; --story-rail: #3A3632;
  --circle-core: #2F2A20; --circle-ring: #3A3632; --cool-line: #6F7C88; --dir-theirs: #AEBBC7;
  --search-border: #46413B; --input-border: #4A453F; --input-bg: #24211E; --dashed-border: #5A534C;
  --grabber: #4A453F; --sheet-scrim: rgba(0,0,0,.55); --readback-bg: #2F2A20; --readback-border: #4A4030;
  --btn-disabled-bg: #34312D; --primary-bg: #EDE9E3; --on-gold: #1a1816;
  --toast-bg: #3A3632; --toast-fg: #EDE9E3; --toast-undo: #E2C25A;
  --sel-shadow: 0 1px 2px rgba(0,0,0,.5); --nav-shadow: 0 10px 26px -16px rgba(0,0,0,.7);
  --fab-shadow: 0 10px 24px -12px rgba(0,0,0,.7); --toast-shadow: 0 12px 28px -12px rgba(0,0,0,.7);
  --sheet-shadow: 0 -16px 44px -20px rgba(0,0,0,.7);
  --pulse: rgba(212,173,46,.45); --pulse-clear: rgba(212,173,46,0);
}

/* Connections, Connect sheet and Why mial (branch v1-web-connect). Light
   values are the exact colors in Connections.dc.html, Connect.dc.html and
   FirstRun.dc.html that the base tokens above do not already name. Dark
   values are derived; the Why mial intro is dark in both themes, so its
   --why-* values are the same in both. */
:root {
  --field: #F5F1EB;          /* code boxes, "Soon" tiles */
  --field-border: #E8E0D2;
  --input: #FFFFFF;
  --panel: #FBF8F2;          /* permission preview, new key box */
  --seg: #F1EBE1;            /* segmented control track */
  --seg-on: #FFFEFB;         /* selected segment */
  --handle: #DDD5C8;
  --switch-on: #292521;
  --switch-off: #D9CFBE;
  --knob: #FFFEFB;
  --on-gold: #292521;        /* text on the gold accent button */
  --backdrop: #E9E3D9;
  --scrim: rgba(41,37,33,.32);
  --shadow-sheet: 0 -18px 50px -20px rgba(41,37,33,.45);
  --shadow-knob: 0 1px 3px rgba(41,37,33,.25);
  --shadow-tab: 0 1px 2px rgba(41,37,33,.1), 0 4px 10px -4px rgba(41,37,33,.16);
  --shadow-toast: 0 12px 28px -12px rgba(41,37,33,.55);
  --ok-bg: #FBF5E4;
  --ok-border: #EBDDB4;
  --toast-action: #E8C65A;

  --inv-bg: #292521;         /* "What a connection can do" card */
  --inv-text: #F5F1EB;
  --inv-label: #D9C48A;
  --inv-body: #CFC6B8;
  --inv-border: #5A534C;

  --mark-slack-bg: #EFE3EC;    --mark-slack-fg: #5B2F52;
  --mark-discord-bg: #E6E7F4;  --mark-discord-fg: #3A3F73;
  --mark-whatsapp-bg: #E2EFE6; --mark-whatsapp-fg: #2C5A3A;
  --mark-zapier-bg: #F6E5DA;   --mark-zapier-fg: #7A3A16;
  --mark-make-bg: #ECE5F4;     --mark-make-fg: #4A2F73;
  --mark-n8n-bg: #F6E2E6;      --mark-n8n-fg: #7A2338;

  --why-bg: #2A2724;
  --why-head: #FBF9F4;
  --why-text: #F5F1EB;
  --why-body: #D8D0C3;
  --why-label: #D9C48A;
  --why-faint: #BFB6A8;
  --why-skip: #CFC6B8;
  --why-gold: #D4AD2E;
  --why-tile: #3A3633;
  --why-tile-text: #F3E6C0;
  --why-pager: #5A534C;
  --why-focus: #E8C65A;
  --why-on-light: #292521;
  /* QR code: dark on light in both themes, so every phone camera reads it. */
  --qr-fg: #292521;
  --qr-bg: #FFFEFB;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --field: #211F1C; --field-border: #3A3632; --input: #1F1D1A; --panel: #2E2C29;
    --seg: #211F1C; --seg-on: #3A3632; --handle: #46413B;
    --switch-on: #EDE9E3; --switch-off: #5E5850; --knob: #2A2724; --on-gold: #1a1816;
    --backdrop: #121110; --scrim: rgba(0,0,0,.5);
    --shadow-sheet: 0 -18px 50px -20px rgba(0,0,0,.7); --shadow-knob: 0 1px 3px rgba(0,0,0,.5);
    --shadow-tab: 0 1px 2px rgba(0,0,0,.3), 0 4px 10px -4px rgba(0,0,0,.4);
    --shadow-toast: 0 12px 28px -12px rgba(0,0,0,.7);
    --ok-bg: #332D21; --ok-border: #4A4128; --toast-action: #5E480C;
    --inv-bg: #34302C; --inv-text: #F5F1EB; --inv-label: #D9C48A; --inv-body: #CFC6B8; --inv-border: #5A534C;
    --mark-slack-bg: #3A2A36; --mark-slack-fg: #E8CDE0;
    --mark-discord-bg: #2C2E45; --mark-discord-fg: #C9CCF0;
    --mark-whatsapp-bg: #24352A; --mark-whatsapp-fg: #BFE0C9;
    --mark-zapier-bg: #3D2A1F; --mark-zapier-fg: #F0C6A8;
    --mark-make-bg: #322A40; --mark-make-fg: #D6C8EE;
    --mark-n8n-bg: #3D2228; --mark-n8n-fg: #F0B8C4;
    --qr-fg: #1a1816; --qr-bg: #F5F1EB;
  }
}
:root[data-theme="dark"] {
  --field: #211F1C; --field-border: #3A3632; --input: #1F1D1A; --panel: #2E2C29;
  --seg: #211F1C; --seg-on: #3A3632; --handle: #46413B;
  --switch-on: #EDE9E3; --switch-off: #5E5850; --knob: #2A2724; --on-gold: #1a1816;
  --backdrop: #121110; --scrim: rgba(0,0,0,.5);
  --shadow-sheet: 0 -18px 50px -20px rgba(0,0,0,.7); --shadow-knob: 0 1px 3px rgba(0,0,0,.5);
  --shadow-tab: 0 1px 2px rgba(0,0,0,.3), 0 4px 10px -4px rgba(0,0,0,.4);
  --shadow-toast: 0 12px 28px -12px rgba(0,0,0,.7);
  --ok-bg: #332D21; --ok-border: #4A4128; --toast-action: #5E480C;
  --inv-bg: #34302C; --inv-text: #F5F1EB; --inv-label: #D9C48A; --inv-body: #CFC6B8; --inv-border: #5A534C;
  --mark-slack-bg: #3A2A36; --mark-slack-fg: #E8CDE0;
  --mark-discord-bg: #2C2E45; --mark-discord-fg: #C9CCF0;
  --mark-whatsapp-bg: #24352A; --mark-whatsapp-fg: #BFE0C9;
  --mark-zapier-bg: #3D2A1F; --mark-zapier-fg: #F0C6A8;
  --mark-make-bg: #322A40; --mark-make-fg: #D6C8EE;
  --mark-n8n-bg: #3D2228; --mark-n8n-fg: #F0B8C4;
    --qr-fg: #1a1816; --qr-bg: #F5F1EB;
}