/* ==========================================================================
   Steerwell — design tokens (visual direction: "Field Notebook")
   Light is the default. Dark applies via prefers-color-scheme unless the
   page forces a theme with <html data-theme="light|dark">.
   Prefix: --sw-
   ========================================================================== */

:root {
  /* ---------- Typography ---------- */
  --sw-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --sw-font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sw-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --sw-text-label: 11px;     /* uppercase section labels, letter-spacing .08em */
  --sw-text-caption: 12px;
  --sw-text-ui-sm: 12.5px;
  --sw-text-ui: 13px;
  --sw-text-ui-lg: 14px;
  --sw-text-quote-sm: 14.5px;
  --sw-text-quote: 16.5px;   /* transcript lines, quotes in cards */
  --sw-text-doc: 18px;       /* long-form document body */
  --sw-text-h4: 20px;
  --sw-text-h3: 24px;
  --sw-text-h2: 30px;
  --sw-text-h1: 38px;
  --sw-text-display: 56px;

  --sw-leading-tight: 1.15;
  --sw-leading-snug: 1.3;
  --sw-leading-ui: 1.45;
  --sw-leading-read: 1.6;

  --sw-weight-regular: 400;
  --sw-weight-medium: 500;
  --sw-weight-semibold: 600;

  --sw-tracking-label: 0.08em;

  /* ---------- Spacing (4px base, 2px half-steps) ---------- */
  --sw-space-0: 0;
  --sw-space-0-5: 2px;
  --sw-space-1: 4px;
  --sw-space-1-5: 6px;
  --sw-space-2: 8px;
  --sw-space-2-5: 10px;
  --sw-space-3: 12px;
  --sw-space-3-5: 14px;
  --sw-space-4: 16px;
  --sw-space-5: 20px;
  --sw-space-6: 24px;
  --sw-space-7: 28px;
  --sw-space-8: 32px;
  --sw-space-10: 40px;
  --sw-space-12: 48px;
  --sw-space-14: 56px;
  --sw-space-16: 64px;

  /* ---------- Radius ---------- */
  --sw-radius-xs: 3px;    /* timeline segments, diff lines */
  --sw-radius-sm: 5px;    /* small icon buttons, kbd */
  --sw-radius-md: 7px;    /* buttons, inputs, tag chips (6px ok) */
  --sw-radius-lg: 10px;   /* inner panels, video frames */
  --sw-radius-xl: 12px;   /* cards */
  --sw-radius-2xl: 14px;  /* panels, popovers, clusters */
  --sw-radius-pill: 999px;

  /* ---------- Control sizes ---------- */
  --sw-control-xs: 22px;
  --sw-control-sm: 26px;
  --sw-control-md: 28px;
  --sw-control-lg: 32px;
  --sw-control-xl: 44px;  /* search fields, touch targets */

  /* ---------- App shell dimensions ---------- */
  --sw-shell-titlebar: 38px;
  --sw-shell-rail: 60px;
  --sw-shell-navigator: 232px;
  --sw-shell-tabs: 36px;
  --sw-shell-statusbar: 28px;
  --sw-shell-terminal-side: 360px;
  --sw-shell-terminal-bottom: 150px;
  --sw-shell-terminal-collapsed: 44px;
  --sw-shell-context-pane: 392px;
  --sw-doc-measure: 700px;

  /* ---------- Motion ---------- */
  --sw-ease: cubic-bezier(.2, .7, .2, 1);
  --sw-duration-fast: 120ms;
  --sw-duration-base: 200ms;
  --sw-duration-slow: 320ms;

  /* ---------- Z layers ---------- */
  --sw-z-popover: 40;
  --sw-z-palette: 60;
  --sw-z-toast: 80;
}

/* ==========================================================================
   LIGHT (default)
   ========================================================================== */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --sw-bg-app: #F6F3ED;        /* paper: app ground, navigator */
  --sw-bg-chrome: #EFEBE3;     /* titlebar, module rail, status bar */
  --sw-bg-view: #FBF9F5;       /* main view area */
  --sw-bg-surface: #FFFEFB;    /* cards, inputs, popovers */
  --sw-bg-sunken: #F1EDE5;     /* chips, wells, current line */
  --sw-bg-terminal: #F2EEE6;
  --sw-bg-canvas: #F3EFE7;     /* synthesis board */
  --sw-canvas-dot: #DCD5C8;
  --sw-bg-media: #2A2926;      /* video frame letterbox */
  --sw-bg-media-placeholder: #4A4843;
  --sw-bg-inverse: #1D1C1A;    /* floating selection toolbar */
  --sw-fg-inverse: #F4F0E8;

  /* Text */
  --sw-ink: #1D1C1A;
  --sw-ink-2: #57534C;         /* secondary */
  --sw-ink-3: #625E57;         /* captions, meta — min. contrast 4.5:1 on view */
  --sw-ink-disabled: #8A857C;

  /* Lines */
  --sw-line: #E0D9CC;
  --sw-line-soft: #ECE6DB;
  --sw-line-strong: #D2CABC;

  /* Accent — the one blue */
  --sw-accent: #2B4C7E;
  --sw-accent-hover: #1C355C;
  --sw-accent-fg: #FFFFFF;
  --sw-accent-soft: #E6ECF5;
  --sw-accent-soft-fg: #23406B;
  --sw-accent-soft-border: #C9D5E8;
  --sw-accent-ring: #D5E0F0;
  --sw-selection: #CFDDF2;

  /* Proposal — agent suggested, not yet accepted */
  --sw-proposal-border: #C08A3E;
  --sw-proposal-bg: #FBF2E2;
  --sw-proposal-bg-soft: #FDF8EF;
  --sw-proposal-fg: #7A4710;

  /* Status */
  --sw-success: #2F6B45;
  --sw-success-dot: #3E7A52;
  --sw-success-soft: #E3EDE4;
  --sw-success-soft-fg: #244F31;
  --sw-warning-dot: #C08A3E;
  --sw-warning-halo: #F4E3C8;
  --sw-danger: #A3362B;
  --sw-danger-soft: #FBF3F1;
  --sw-danger-border: #E7C3BD;
  --sw-danger-fg: #8C2E24;

  /* Diff review */
  --sw-diff-del-bg: #F8E4E0;
  --sw-diff-del-fg: #7E2A21;
  --sw-diff-add-bg: #E3EDE4;
  --sw-diff-add-fg: #1F4A2D;

  /* Locality badges */
  --sw-local-bg: #E3EDE4;   --sw-local-fg: #244F31;
  --sw-synced-bg: #E6ECF5;  --sw-synced-fg: #23406B;
  --sw-shared-bg: #F1E7F0;  --sw-shared-fg: #5E3160;
  --sw-hosted-bg: #F4E8D4;  --sw-hosted-fg: #6E430F;

  /* Categorical palette (tags / codes). solid = marks & dots, bg + fg = chips */
  --sw-cat-1: #B5643C;  --sw-cat-1-bg: #F6E6DD;  --sw-cat-1-fg: #7B3A1B;  /* clay   */
  --sw-cat-2: #4F6D9A;  --sw-cat-2-bg: #E3E9F2;  --sw-cat-2-fg: #2F4768;  /* slate  */
  --sw-cat-3: #85577E;  --sw-cat-3-bg: #EFE4ED;  --sw-cat-3-fg: #5C3556;  /* plum   */
  --sw-cat-4: #5E7F5A;  --sw-cat-4-bg: #E4ECE2;  --sw-cat-4-fg: #34502F;  /* sage   */
  --sw-cat-5: #3F7A7A;  --sw-cat-5-bg: #E0EDED;  --sw-cat-5-fg: #24504F;  /* teal   */
  --sw-cat-6: #8A6D3B;  --sw-cat-6-bg: #EEE7DB;  --sw-cat-6-fg: #5A4524;  /* umber  */

  /* Elevation */
  --sw-shadow-sm: 0 1px 2px rgba(40, 32, 20, .08);
  --sw-shadow-md: 0 8px 24px rgba(40, 32, 20, .10);
  --sw-shadow-lg: 0 18px 40px rgba(40, 32, 20, .16);

  /* Window controls (macOS-style titlebar, decorative) */
  --sw-traffic-close: #E0655A;
  --sw-traffic-min: #E3B341;
  --sw-traffic-max: #5FB660;

  /* Swissness badge only (marketing surfaces). Same in both themes. */
  --sw-swiss-red: #DA291C;
  --sw-swiss-cross: #FFFFFF;
}

/* ==========================================================================
   DARK
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sw-bg-app: #1B1A18;
    --sw-bg-chrome: #161513;
    --sw-bg-view: #1F1E1B;
    --sw-bg-surface: #23211E;
    --sw-bg-sunken: #2A2825;
    --sw-bg-terminal: #191816;
    --sw-bg-canvas: #1E1D1A;
    --sw-canvas-dot: #34312C;
    --sw-bg-media: #111110;
    --sw-bg-media-placeholder: #2E2C29;
    --sw-bg-inverse: #ECE7DD;
    --sw-fg-inverse: #1B1A18;
    --sw-ink: #ECE7DD;
    --sw-ink-2: #C4BDB0;
    --sw-ink-3: #B3AC9F;
    --sw-ink-disabled: #7E786E;
    --sw-line: #34312C;
    --sw-line-soft: #2C2A26;
    --sw-line-strong: #45413B;
    --sw-accent: #8FAEE0;
    --sw-accent-hover: #AFC6EC;
    --sw-accent-fg: #14233B;
    --sw-accent-soft: #25324A;
    --sw-accent-soft-fg: #BCD0F0;
    --sw-accent-soft-border: #34466A;
    --sw-accent-ring: #2F4468;
    --sw-selection: #2F4468;
    --sw-proposal-border: #D9A55C;
    --sw-proposal-bg: #3A2E1C;
    --sw-proposal-bg-soft: #2E261B;
    --sw-proposal-fg: #E7B876;
    --sw-success: #7FC096;
    --sw-success-dot: #5FA476;
    --sw-success-soft: #23372A;
    --sw-success-soft-fg: #A9D3B4;
    --sw-warning-dot: #D9A55C;
    --sw-warning-halo: #3A2E1C;
    --sw-danger: #E58A7E;
    --sw-danger-soft: #3E2420;
    --sw-danger-border: #5A302A;
    --sw-danger-fg: #F0A99F;
    --sw-diff-del-bg: #3E2420;
    --sw-diff-del-fg: #F0A99F;
    --sw-diff-add-bg: #23372A;
    --sw-diff-add-fg: #A9D3B4;
    --sw-local-bg: #23372A;   --sw-local-fg: #A9D3B4;
    --sw-synced-bg: #25324A;  --sw-synced-fg: #BCD0F0;
    --sw-shared-bg: #3A2839;  --sw-shared-fg: #E0BCDD;
    --sw-hosted-bg: #3A2E1C;  --sw-hosted-fg: #E7C48E;
    --sw-cat-1: #D08A66;  --sw-cat-1-bg: #3B271D;  --sw-cat-1-fg: #EDB99C;
    --sw-cat-2: #86A2CC;  --sw-cat-2-bg: #243044;  --sw-cat-2-fg: #BACCE8;
    --sw-cat-3: #B78AAF;  --sw-cat-3-bg: #35263A;  --sw-cat-3-fg: #DDBCD7;
    --sw-cat-4: #92B38D;  --sw-cat-4-bg: #26331F;  --sw-cat-4-fg: #BFD6BA;
    --sw-cat-5: #74B0AF;  --sw-cat-5-bg: #1F3434;  --sw-cat-5-fg: #A8D6D5;
    --sw-cat-6: #C4A36D;  --sw-cat-6-bg: #352B1C;  --sw-cat-6-fg: #E0C9A0;
    --sw-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --sw-shadow-md: 0 8px 24px rgba(0, 0, 0, .40);
    --sw-shadow-lg: 0 18px 40px rgba(0, 0, 0, .50);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sw-bg-app: #1B1A18;
  --sw-bg-chrome: #161513;
  --sw-bg-view: #1F1E1B;
  --sw-bg-surface: #23211E;
  --sw-bg-sunken: #2A2825;
  --sw-bg-terminal: #191816;
  --sw-bg-canvas: #1E1D1A;
  --sw-canvas-dot: #34312C;
  --sw-bg-media: #111110;
  --sw-bg-media-placeholder: #2E2C29;
  --sw-bg-inverse: #ECE7DD;
  --sw-fg-inverse: #1B1A18;
  --sw-ink: #ECE7DD;
  --sw-ink-2: #C4BDB0;
  --sw-ink-3: #B3AC9F;
  --sw-ink-disabled: #7E786E;
  --sw-line: #34312C;
  --sw-line-soft: #2C2A26;
  --sw-line-strong: #45413B;
  --sw-accent: #8FAEE0;
  --sw-accent-hover: #AFC6EC;
  --sw-accent-fg: #14233B;
  --sw-accent-soft: #25324A;
  --sw-accent-soft-fg: #BCD0F0;
  --sw-accent-soft-border: #34466A;
  --sw-accent-ring: #2F4468;
  --sw-selection: #2F4468;
  --sw-proposal-border: #D9A55C;
  --sw-proposal-bg: #3A2E1C;
  --sw-proposal-bg-soft: #2E261B;
  --sw-proposal-fg: #E7B876;
  --sw-success: #7FC096;
  --sw-success-dot: #5FA476;
  --sw-success-soft: #23372A;
  --sw-success-soft-fg: #A9D3B4;
  --sw-warning-dot: #D9A55C;
  --sw-warning-halo: #3A2E1C;
  --sw-danger: #E58A7E;
  --sw-danger-soft: #3E2420;
  --sw-danger-border: #5A302A;
  --sw-danger-fg: #F0A99F;
  --sw-diff-del-bg: #3E2420;
  --sw-diff-del-fg: #F0A99F;
  --sw-diff-add-bg: #23372A;
  --sw-diff-add-fg: #A9D3B4;
  --sw-local-bg: #23372A;   --sw-local-fg: #A9D3B4;
  --sw-synced-bg: #25324A;  --sw-synced-fg: #BCD0F0;
  --sw-shared-bg: #3A2839;  --sw-shared-fg: #E0BCDD;
  --sw-hosted-bg: #3A2E1C;  --sw-hosted-fg: #E7C48E;
  --sw-cat-1: #D08A66;  --sw-cat-1-bg: #3B271D;  --sw-cat-1-fg: #EDB99C;
  --sw-cat-2: #86A2CC;  --sw-cat-2-bg: #243044;  --sw-cat-2-fg: #BACCE8;
  --sw-cat-3: #B78AAF;  --sw-cat-3-bg: #35263A;  --sw-cat-3-fg: #DDBCD7;
  --sw-cat-4: #92B38D;  --sw-cat-4-bg: #26331F;  --sw-cat-4-fg: #BFD6BA;
  --sw-cat-5: #74B0AF;  --sw-cat-5-bg: #1F3434;  --sw-cat-5-fg: #A8D6D5;
  --sw-cat-6: #C4A36D;  --sw-cat-6-bg: #352B1C;  --sw-cat-6-fg: #E0C9A0;
  --sw-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --sw-shadow-md: 0 8px 24px rgba(0, 0, 0, .40);
  --sw-shadow-lg: 0 18px 40px rgba(0, 0, 0, .50);
}

@media (prefers-reduced-motion: reduce) {
  :root { --sw-duration-fast: 0ms; --sw-duration-base: 0ms; --sw-duration-slow: 0ms; }
}