/* projectious.work brand tokens

   GENERATED by scripts/build-tokens.mjs from src/data/brand.yaml.
   Do not edit by hand — edit brand.yaml and regenerate, or the next run
   silently reverts the change. scripts/check-tokens.sh enforces this.
*/

:root {
  /* Named brand colours. Shortcuts into the scales, not a separate palette. */
  --color-primary: #1d3352;   /* Text, headings, primary surfaces */
  --color-primary-light: #2b4d78;   /* Hover states, dark-mode primary */
  --color-primary-dark: #132440;   /* Dark backgrounds, navbar, code blocks */
  --color-accent: #E05232;   /* CTAs, highlights, active states */
  --color-accent-light: #ea7558;   /* Accent hover on dark, syntax strings */
  --color-accent-dark: #b84228;   /* Accent pressed state */
  --color-accent-solid: #cc4528;   /* Fill for solid controls with white text (4.72:1) */
  --color-secondary: #546a82;   /* Supporting text, borders */

  /* The three 12-step scales, light mode. Step roles:
     1 app bg, 2 subtle bg, 3 elem bg, 4 hover bg, 5 active bg, 6 subtle brd, 7 border, 8 strong brd, 9 solid bg, 10 solid hvr, 11 lo text, 12 hi text.
     Only 11 and 12 are text roles. */
  /* Midnight — Primary. Structure, text, and the calm end of the system. */
  --midnight-1: #f8f9fb;
  --midnight-2: #f0f3f8;
  --midnight-3: #e2e9f2;
  --midnight-4: #d3deec;
  --midnight-5: #c3d1e3;
  --midnight-6: #b0c1d6;
  --midnight-7: #96abc6;
  --midnight-8: #7490b2;
  --midnight-9: #1d3352;
  --midnight-10: #162944;
  --midnight-11: #3a5a82;
  --midnight-12: #142438;
  /* Orange — Accent. Calls to action, active states, and emphasis. Used sparingly. */
  --orange-1: #fef9f7;
  --orange-2: #fef0ea;
  --orange-3: #fde0d5;
  --orange-4: #fccebd;
  --orange-5: #f8baa5;
  --orange-6: #f0a48c;
  --orange-7: #e58a6e;
  --orange-8: #d86e4e;
  --orange-9: #E05232;
  --orange-10: #cc4528;
  --orange-11: #c04424;
  --orange-12: #6e2714;
  /* Slate — Secondary. Supporting text, borders, and neutral surfaces. */
  --slate-1: #f9f9fa;
  --slate-2: #f1f2f4;
  --slate-3: #e6e8eb;
  --slate-4: #dadce0;
  --slate-5: #cdd0d5;
  --slate-6: #bec2c8;
  --slate-7: #adb2ba;
  --slate-8: #9299a4;
  --slate-9: #546a82;
  --slate-10: #4a5e74;
  --slate-11: #5c6f82;
  --slate-12: #1e2b38;

  /* Both ramps again under fixed names, so a consumer whose dark mode is a
     class or an attribute this file does not know about can map to them
     directly. The names above swap with the mode; these never do. */
  --midnight-light-1: #f8f9fb;
  --midnight-light-2: #f0f3f8;
  --midnight-light-3: #e2e9f2;
  --midnight-light-4: #d3deec;
  --midnight-light-5: #c3d1e3;
  --midnight-light-6: #b0c1d6;
  --midnight-light-7: #96abc6;
  --midnight-light-8: #7490b2;
  --midnight-light-9: #1d3352;
  --midnight-light-10: #162944;
  --midnight-light-11: #3a5a82;
  --midnight-light-12: #142438;
  --midnight-dark-1: #0e1720;
  --midnight-dark-2: #131e2b;
  --midnight-dark-3: #1a2b3e;
  --midnight-dark-4: #20354d;
  --midnight-dark-5: #263f5a;
  --midnight-dark-6: #2e4b68;
  --midnight-dark-7: #3a5c7e;
  --midnight-dark-8: #4d7098;
  --midnight-dark-9: #1d3352;
  --midnight-dark-10: #2b4d78;
  --midnight-dark-11: #8aacc8;
  --midnight-dark-12: #c5daf0;
  --orange-light-1: #fef9f7;
  --orange-light-2: #fef0ea;
  --orange-light-3: #fde0d5;
  --orange-light-4: #fccebd;
  --orange-light-5: #f8baa5;
  --orange-light-6: #f0a48c;
  --orange-light-7: #e58a6e;
  --orange-light-8: #d86e4e;
  --orange-light-9: #E05232;
  --orange-light-10: #cc4528;
  --orange-light-11: #c04424;
  --orange-light-12: #6e2714;
  --orange-dark-1: #1c110d;
  --orange-dark-2: #271610;
  --orange-dark-3: #3d1e13;
  --orange-dark-4: #522616;
  --orange-dark-5: #643019;
  --orange-dark-6: #7a3c20;
  --orange-dark-7: #974b28;
  --orange-dark-8: #b85c32;
  --orange-dark-9: #E05232;
  --orange-dark-10: #ea7558;
  --orange-dark-11: #f09878;
  --orange-dark-12: #fcddd2;
  --slate-light-1: #f9f9fa;
  --slate-light-2: #f1f2f4;
  --slate-light-3: #e6e8eb;
  --slate-light-4: #dadce0;
  --slate-light-5: #cdd0d5;
  --slate-light-6: #bec2c8;
  --slate-light-7: #adb2ba;
  --slate-light-8: #9299a4;
  --slate-light-9: #546a82;
  --slate-light-10: #4a5e74;
  --slate-light-11: #5c6f82;
  --slate-light-12: #1e2b38;
  --slate-dark-1: #111416;
  --slate-dark-2: #171b1f;
  --slate-dark-3: #20262c;
  --slate-dark-4: #283038;
  --slate-dark-5: #303a43;
  --slate-dark-6: #3a454f;
  --slate-dark-7: #47545f;
  --slate-dark-8: #5a6a78;
  --slate-dark-9: #546a82;
  --slate-dark-10: #627a92;
  --slate-dark-11: #97a8b8;
  --slate-dark-12: #d5dee8;
  --color-success-light: #2f7d65;  --color-success-light-bg: #d1ebe0;  --color-success-light-fg: #276754;
  --color-success-dark: #6cc090;  --color-success-dark-bg: #16302a;  --color-success-dark-fg: #6cc090;
  --color-warning-light: #8b6508;  --color-warning-light-bg: #f5ecd0;  --color-warning-light-fg: #6f5106;
  --color-warning-dark: #e0a92a;  --color-warning-dark-bg: #33280d;  --color-warning-dark-fg: #e0a92a;
  --color-danger-light: #a8261c;  --color-danger-light-bg: #fce8e8;  --color-danger-light-fg: #a8261c;
  --color-danger-dark: #f08b80;  --color-danger-dark-bg: #3a1c19;  --color-danger-dark-fg: #f08b80;
  --color-info-light: #3a5a82;  --color-info-light-bg: #dae2ec;  --color-info-light-fg: #3a5a82;
  --color-info-dark: #8aacc8;  --color-info-dark-bg: #1a2b3e;  --color-info-dark-fg: #8aacc8;
  --color-bg-light: #f8f9fb;  --color-bg-dark: #0e1720;
  --color-surface-light: #ffffff;  --color-surface-dark: #131e2b;
  --color-text-primary-light: #142438;  --color-text-primary-dark: #c5daf0;
  --color-text-secondary-light: #546a82;  --color-text-secondary-dark: #97a8b8;
  --color-text-muted-light: #5c6f82;  --color-text-muted-dark: #97a8b8;
  --color-border-light: #cdd0d5;  --color-border-dark: #263f5a;

  /* Semantic colours. `-fg` is the foreground for the matching tint,
     where the solid value does not clear AA against it. */
  --color-success: #2f7d65;
  --color-success-bg: #d1ebe0;
  --color-success-fg: #276754;   /* 5.28:1 on the tint */
  --color-warning: #8b6508;
  --color-warning-bg: #f5ecd0;
  --color-warning-fg: #6f5106;   /* 6.23:1 on the tint */
  --color-danger: #a8261c;
  --color-danger-bg: #fce8e8;
  --color-danger-fg: #a8261c;   /* 6.03:1 on the tint */
  --color-info: #3a5a82;
  --color-info-bg: #dae2ec;
  --color-info-fg: #3a5a82;   /* 5.42:1 on the tint */

  /* App surfaces and text */
  --color-bg: #f8f9fb;
  --color-surface: #ffffff;
  --color-text-primary: #142438;   /* 14.89:1 */
  --color-text-secondary: #546a82;   /* 5.30:1 */
  --color-text-muted: #5c6f82;   /* 4.92:1 */
  --color-border: #cdd0d5;

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
  --font-code: 'IBM Plex Mono', monospace;

  --type-display-size: 48px;  --type-display-weight: 800;  --type-display-lh: 1.1;
  --type-h1-size: 36px;  --type-h1-weight: 700;  --type-h1-lh: 1.15;
  --type-h2-size: 28px;  --type-h2-weight: 700;  --type-h2-lh: 1.2;
  --type-h3-size: 22px;  --type-h3-weight: 600;  --type-h3-lh: 1.25;
  --type-h4-size: 18px;  --type-h4-weight: 600;  --type-h4-lh: 1.3;
  --type-h5-size: 15px;  --type-h5-weight: 600;  --type-h5-lh: 1.35;
  --type-body-l-size: 16px;  --type-body-l-weight: 400;  --type-body-l-lh: 1.65;
  --type-caption-size: 12px;  --type-caption-weight: 400;  --type-caption-lh: 1.5;
  --type-overline-size: 11px;  --type-overline-weight: 600;  --type-overline-lh: 1.3;
  --type-code-size: 13px;  --type-code-weight: 400;  --type-code-lh: 1.6;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Border radius */
  --radius-sm: 3px;   /* Tags, chips, small indicators */
  --radius-md: 6px;   /* Buttons, inputs, code blocks */
  --radius-lg: 9px;   /* Cards, panels */
  --radius-xl: 13px;   /* Large panels, modals */
  --radius-full: 9999px;   /* Pills, avatars */

  /* Elevation */
  --shadow-0: none;   /* Flat surfaces, default */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.06);   /* Subtle lift — cards at rest */
  --shadow-2: 0 4px 12px rgba(0,0,0,0.08);   /* Raised — hover, dropdowns */
  --shadow-3: 0 8px 24px rgba(0,0,0,0.12);   /* Overlay — modals, popovers */

  /* Motion */
  --duration-micro: 100ms;   /* Colour and opacity changes */
  --duration-standard: 200ms;   /* Most transitions — hover, focus, small moves */
  --duration-expand: 300ms;   /* Height and width changes, accordions */
  --duration-page: 400ms;   /* Route and view transitions */
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);   /* Entering — elements arriving on screen */
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);   /* Exiting — elements leaving screen */

  /* Breakpoints. Below sm is the base, not a breakpoint. Custom properties
     cannot be used in a media query, so these are for calc() and JS; the
     queries themselves have to be written out. */
  --breakpoint-sm: 640px;   /* Large phone, landscape phone */
  --breakpoint-md: 768px;   /* Small tablet — the first two-column layout */
  --breakpoint-lg: 1024px;   /* Tablet landscape, small laptop — sidebars appear */
  --breakpoint-xl: 1280px;   /* Desktop — the 1100px measure is fully margined */

  /* Terminal — one dark surface, sixteen ANSI slots plus chrome.
     Measured against --terminal-surface; floor 4.95:1. */
  --terminal-surface: #0e1720;
  --terminal-ansi-0: #0e1720;   /* black */
  --terminal-ansi-1: #e55b5b;   /* red */
  --terminal-ansi-2: #3f9d74;   /* green */
  --terminal-ansi-3: #c08a1e;   /* yellow */
  --terminal-ansi-4: #6289b3;   /* blue */
  --terminal-ansi-5: #bd6d96;   /* magenta */
  --terminal-ansi-6: #3f97a3;   /* cyan */
  --terminal-ansi-7: #97a8b8;   /* white */
  --terminal-ansi-8: #2e4b68;   /* bright black */
  --terminal-ansi-9: #f08b80;   /* bright red */
  --terminal-ansi-10: #6cc090;   /* bright green */
  --terminal-ansi-11: #e0a92a;   /* bright yellow */
  --terminal-ansi-12: #8aacc8;   /* bright blue */
  --terminal-ansi-13: #d491b4;   /* bright magenta */
  --terminal-ansi-14: #74c0c9;   /* bright cyan */
  --terminal-ansi-15: #c5daf0;   /* bright white */
  --terminal-background: #0e1720;
  --terminal-foreground: #c5daf0;
  --terminal-cursor: #e05232;
  --terminal-cursor-text: #0e1720;
  --terminal-selection-background: #20354d;
  --terminal-selection-text: #c5daf0;
  --terminal-dim-comment: #72889d;
  --terminal-status-bar-surface: #131e2b;
  --terminal-status-bar-text: #c5daf0;
  --terminal-inactive-tab-and-pane-label: #7b8da3;
  --terminal-active-tab-fill: #e05232;
  --terminal-active-pane-border: #e05232;
  --terminal-inactive-pane-border: #7b8da3;
}

/* Dark mode. The scales, the semantic colours and the surface aliases all
   have a dark variant; everything else is mode-independent. Step 9 is
   constant across modes by design. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Midnight */
    --midnight-1: #0e1720;
    --midnight-2: #131e2b;
    --midnight-3: #1a2b3e;
    --midnight-4: #20354d;
    --midnight-5: #263f5a;
    --midnight-6: #2e4b68;
    --midnight-7: #3a5c7e;
    --midnight-8: #4d7098;
    --midnight-9: #1d3352;
    --midnight-10: #2b4d78;
    --midnight-11: #8aacc8;
    --midnight-12: #c5daf0;
    /* Orange */
    --orange-1: #1c110d;
    --orange-2: #271610;
    --orange-3: #3d1e13;
    --orange-4: #522616;
    --orange-5: #643019;
    --orange-6: #7a3c20;
    --orange-7: #974b28;
    --orange-8: #b85c32;
    --orange-9: #E05232;
    --orange-10: #ea7558;
    --orange-11: #f09878;
    --orange-12: #fcddd2;
    /* Slate */
    --slate-1: #111416;
    --slate-2: #171b1f;
    --slate-3: #20262c;
    --slate-4: #283038;
    --slate-5: #303a43;
    --slate-6: #3a454f;
    --slate-7: #47545f;
    --slate-8: #5a6a78;
    --slate-9: #546a82;
    --slate-10: #627a92;
    --slate-11: #97a8b8;
    --slate-12: #d5dee8;

    --color-success: #6cc090;
    --color-success-bg: #16302a;
    --color-success-fg: #6cc090;   /* 6.43:1 on the tint */
    --color-warning: #e0a92a;
    --color-warning-bg: #33280d;
    --color-warning-fg: #e0a92a;   /* 6.81:1 on the tint */
    --color-danger: #f08b80;
    --color-danger-bg: #3a1c19;
    --color-danger-fg: #f08b80;   /* 6.40:1 on the tint */
    --color-info: #8aacc8;
    --color-info-bg: #1a2b3e;
    --color-info-fg: #8aacc8;   /* 6.04:1 on the tint */

    --color-bg: #0e1720;
    --color-surface: #131e2b;
    --color-text-primary: #c5daf0;   /* 12.62:1 */
    --color-text-secondary: #97a8b8;   /* 7.41:1 */
    --color-text-muted: #97a8b8;   /* 7.41:1 */
    --color-border: #263f5a;
  }
}

[data-theme="dark"] {
  /* Midnight */
  --midnight-1: #0e1720;
  --midnight-2: #131e2b;
  --midnight-3: #1a2b3e;
  --midnight-4: #20354d;
  --midnight-5: #263f5a;
  --midnight-6: #2e4b68;
  --midnight-7: #3a5c7e;
  --midnight-8: #4d7098;
  --midnight-9: #1d3352;
  --midnight-10: #2b4d78;
  --midnight-11: #8aacc8;
  --midnight-12: #c5daf0;
  /* Orange */
  --orange-1: #1c110d;
  --orange-2: #271610;
  --orange-3: #3d1e13;
  --orange-4: #522616;
  --orange-5: #643019;
  --orange-6: #7a3c20;
  --orange-7: #974b28;
  --orange-8: #b85c32;
  --orange-9: #E05232;
  --orange-10: #ea7558;
  --orange-11: #f09878;
  --orange-12: #fcddd2;
  /* Slate */
  --slate-1: #111416;
  --slate-2: #171b1f;
  --slate-3: #20262c;
  --slate-4: #283038;
  --slate-5: #303a43;
  --slate-6: #3a454f;
  --slate-7: #47545f;
  --slate-8: #5a6a78;
  --slate-9: #546a82;
  --slate-10: #627a92;
  --slate-11: #97a8b8;
  --slate-12: #d5dee8;

  --color-success: #6cc090;
  --color-success-bg: #16302a;
  --color-success-fg: #6cc090;   /* 6.43:1 on the tint */
  --color-warning: #e0a92a;
  --color-warning-bg: #33280d;
  --color-warning-fg: #e0a92a;   /* 6.81:1 on the tint */
  --color-danger: #f08b80;
  --color-danger-bg: #3a1c19;
  --color-danger-fg: #f08b80;   /* 6.40:1 on the tint */
  --color-info: #8aacc8;
  --color-info-bg: #1a2b3e;
  --color-info-fg: #8aacc8;   /* 6.04:1 on the tint */

  --color-bg: #0e1720;
  --color-surface: #131e2b;
  --color-text-primary: #c5daf0;   /* 12.62:1 */
  --color-text-secondary: #97a8b8;   /* 7.41:1 */
  --color-text-muted: #97a8b8;   /* 7.41:1 */
  --color-border: #263f5a;
}