@import url("./chroma/light.css");
@import url("./codemirror/light.css");
@import url("./markup/light.css");

:root {
  color-scheme: light;

  /* ── Warm-neutral scale (replaces zinc) ── */
  --warm-50: #FAF8F5;
  --warm-100: #F2EDE4;
  --warm-150: #EBE6DD;
  --warm-200: #E3DED5;
  --warm-250: #DBD5CC;
  --warm-300: #D4CFC9;
  --warm-350: #BDB8B1;
  --warm-400: #A6A099;
  --warm-450: #908A83;
  --warm-500: #7A746D;
  --warm-550: #6D6762;
  --warm-600: #645C55;
  --warm-650: #574F49;
  --warm-700: #4A433D;
  --warm-750: #3D3733;
  --warm-800: #2B2B2B;
  --warm-850: #222120;
  --warm-900: #1A1A1A;

  /* ── Primary: Bronze ── */
  --color-primary: #6E5A3C;
  --color-primary-contrast: #F2EDE4;
  --color-primary-dark-1: #6E5A3C;
  --color-primary-dark-2: #5E4D33;
  --color-primary-dark-3: #5E4D33;
  --color-primary-dark-4: #4E4029;
  --color-primary-dark-5: #4E4029;
  --color-primary-dark-6: #3E3320;
  --color-primary-dark-7: #3E3320;
  --color-primary-light-1: #7D6847;
  --color-primary-light-2: #8C7652;
  --color-primary-light-3: #A8906A;
  --color-primary-light-4: #BDA885;
  --color-primary-light-5: #D2C0A0;
  --color-primary-light-6: #E8D8BC;
  --color-primary-light-7: #F5EFE5;
  --color-primary-alpha-10: #6E5A3C19;
  --color-primary-alpha-20: #6E5A3C33;
  --color-primary-alpha-30: #6E5A3C4b;
  --color-primary-alpha-40: #6E5A3C66;
  --color-primary-alpha-50: #6E5A3C80;
  --color-primary-alpha-60: #6E5A3C99;
  --color-primary-alpha-70: #6E5A3Cb3;
  --color-primary-alpha-80: #6E5A3Ccc;
  --color-primary-alpha-90: #6E5A3Ce1;
  --color-primary-hover: var(--color-primary-dark-2);
  --color-primary-active: var(--color-primary-dark-4);

  /* ── Secondary ── */
  --color-secondary: var(--warm-200);
  --color-secondary-dark-1: var(--warm-200);
  --color-secondary-dark-2: var(--warm-300);
  --color-secondary-dark-3: var(--warm-300);
  --color-secondary-dark-4: var(--warm-400);
  --color-secondary-dark-5: var(--warm-400);
  --color-secondary-dark-6: var(--warm-500);
  --color-secondary-dark-7: var(--warm-500);
  --color-secondary-dark-8: var(--warm-600);
  --color-secondary-dark-9: var(--warm-600);
  --color-secondary-dark-10: var(--warm-700);
  --color-secondary-dark-11: var(--warm-700);
  --color-secondary-dark-12: var(--warm-800);
  --color-secondary-dark-13: var(--warm-800);
  --color-secondary-light-1: var(--warm-200);
  --color-secondary-light-2: var(--warm-100);
  --color-secondary-light-3: var(--warm-100);
  --color-secondary-light-4: var(--warm-50);
  --color-secondary-alpha-10: #D4CFC919;
  --color-secondary-alpha-20: #D4CFC933;
  --color-secondary-alpha-30: #D4CFC94b;
  --color-secondary-alpha-40: #D4CFC966;
  --color-secondary-alpha-50: #D4CFC980;
  --color-secondary-alpha-60: #D4CFC999;
  --color-secondary-alpha-70: #D4CFC9b3;
  --color-secondary-alpha-80: #D4CFC9cc;
  --color-secondary-alpha-90: #D4CFC9e1;
  --color-secondary-hover: var(--color-secondary-dark-2);
  --color-secondary-active: var(--color-secondary-dark-4);

  /* ── Semantic: Scarlet (error) ── */
  --color-red: #8B3A3A;
  --color-red-light: #D4A0A0;
  --color-red-dark-1: #6B2A2A;
  --color-red-dark-2: #4A1A1A;
  --color-error-border: #E0BCBC;
  --color-error-bg: #F2E0E0;
  --color-error-bg-active: #E0BCBC;
  --color-error-bg-hover: #E0BCBC;
  --color-error-text: #4A1A1A;

  /* ── Semantic: Sage (success) ── */
  --color-green: #5A6E5A;
  --color-green-light: #A0BCA0;
  --color-green-dark-1: #3A4E3A;
  --color-green-dark-2: #2A3E2A;
  --color-success-border: #BCE0BC;
  --color-success-bg: #E0F2E0;
  --color-success-text: #2A3E2A;

  /* ── Semantic: Amber (warning) ── */
  --color-yellow: #8B6B2A;
  --color-yellow-light: #D4BC7A;
  --color-yellow-dark-1: #6B5020;
  --color-yellow-dark-2: #4A3810;
  --color-warning-border: #E0D0A0;
  --color-warning-bg: #F2EBD0;
  --color-warning-text: #4A3810;

  /* ── Semantic: Slate Blue (info) ── */
  --color-blue: #5A6B7A;
  --color-blue-light: #A0B4C8;
  --color-blue-dark-1: #3A4B5A;
  --color-blue-dark-2: #2A3B4A;
  --color-info-border: #BCD0E0;
  --color-info-bg: #E0EBF2;
  --color-info-text: #2A3B4A;

  /* ── Other semantic colors ── */
  --color-orange: #8B6530;
  --color-orange-light: #D4AC7A;
  --color-orange-dark-1: #6B4C20;
  --color-orange-dark-2: #4A3510;
  --color-olive: #91a313;
  --color-olive-light: #b8cc40;
  --color-olive-dark-1: #728212;
  --color-olive-dark-2: #586310;
  --color-teal: #0d9488;
  --color-teal-light: #2dd4c8;
  --color-teal-dark-1: #0a7069;
  --color-teal-dark-2: #064e4a;
  --color-violet: #7c3aed;
  --color-violet-light: #a78bfa;
  --color-violet-dark-1: #5b21b6;
  --color-violet-dark-2: #4c1d95;
  --color-purple: #9333ea;
  --color-purple-light: #c084fc;
  --color-purple-dark-1: #7e22ce;
  --color-purple-dark-2: #6b21a8;
  --color-pink: #db2777;
  --color-pink-light: #f472b6;
  --color-pink-dark-1: #be185d;
  --color-pink-dark-2: #9d174d;
  --color-brown: #6E5A3C;
  --color-brown-light: #BDA885;
  --color-brown-dark-1: #5E4D33;
  --color-brown-dark-2: #4E4029;
  --color-grey: #4b5563;
  --color-grey-light: var(--warm-350);
  --color-grey-dark-1: var(--warm-650);
  --color-grey-dark-2: var(--warm-750);
  --color-black: #000000;
  --color-black-light: var(--warm-800);
  --color-black-dark-1: #000000;
  --color-black-dark-2: #000000;
  --color-gold: #8B6B2A;
  --color-white: #ffffff;

  /* ── Diff: Scarlet removed, Sage added ── */
  --color-diff-removed-word-bg: #E0BCBC;
  --color-diff-added-word-bg: #BCE0BC;
  --color-diff-removed-row-bg: #F2E0E0;
  --color-diff-moved-row-bg: #F2EBD0;
  --color-diff-added-row-bg: #E0F2E0;
  --color-diff-removed-row-border: #E0BCBC;
  --color-diff-moved-row-border: #E0D0A0;
  --color-diff-added-row-border: #BCE0BC;
  --color-diff-inactive: var(--warm-100);

  /* ── Body / Layout ── */
  --color-body: #FAF8F5;
  --color-box-header: var(--warm-100);
  --color-box-body: var(--warm-50);
  --color-box-body-highlight: var(--warm-200);
  --color-footer: var(--warm-100);
  --color-header-wrapper: var(--warm-50);
  --color-header-wrapper-transparent: #FAF8F500;
  --color-timeline: var(--warm-200);

  /* ── Text ── */
  --color-text-dark: #1A1A1A;
  --color-text: var(--warm-900);
  --color-text-light: var(--warm-700);
  --color-text-light-1: var(--warm-650);
  --color-text-light-2: var(--warm-600);
  --color-text-light-3: var(--warm-550);
  --color-text-focus: #ffffff;
  --color-placeholder-text: var(--color-text-light-3);
  --color-caret: var(--color-text);

  /* ── Input ── */
  --color-input-text: var(--warm-800);
  --color-input-background: #ffffff;
  --color-input-toggle-background: #ffffff;
  --color-input-border: var(--warm-300);
  --color-input-border-hover: var(--warm-400);

  /* ── Button / Interactive ── */
  --color-button: var(--warm-150);
  --color-hover: #E3DED5aa;
  --color-active: #DBD5CC;
  --color-light: #ffffffcc;
  --color-light-border: #0000001d;
  --color-expand-button: var(--warm-200);

  /* ── Card / Menu / Nav ── */
  --color-card: var(--warm-50);
  --fancy-card-bg: var(--warm-100);
  --fancy-card-border: var(--warm-200);
  --color-menu: var(--warm-100);
  --color-nav-bg: var(--warm-100);
  --color-nav-hover-bg: var(--warm-300);
  --color-secondary-nav-bg: var(--color-body);
  --color-secondary-bg: var(--warm-100);

  /* ── Tooltip ── */
  --color-tooltip-text: #F2EDE4;
  --color-tooltip-bg: #000000f0;

  /* ── Code / Markup ── */
  --color-code-bg: var(--warm-50);
  --color-markup-table-row: #ffffff06;
  --color-markup-code-block: var(--warm-150);
  --color-markup-code-inline: var(--warm-200);
  --color-editor-line-highlight: var(--warm-100);

  /* ── Console ── */
  --color-console-fg: #eeeff2;
  --color-console-fg-subtle: #959cab;
  --color-console-bg: #1f212b;
  --color-console-border: #383c47;
  --color-console-hover-bg: #ffffff16;
  --color-console-active-bg: #454a57;
  --color-console-menu-bg: #383c47;
  --color-console-menu-border: #5c6374;

  /* ── Label ── */
  --color-label-text: var(--color-text);
  --color-label-bg: #D4CFC97b;
  --color-label-hover-bg: #D4CFC9a0;
  --color-label-active-bg: #D4CFC9ff;
  --color-label-bg-alt: #D4CFC9ff;

  /* ── Badge ── */
  --color-red-badge: #8B3A3A;
  --color-red-badge-bg: #F2E0E0;
  --color-red-badge-hover-bg: #E0BCBC;
  --color-green-badge: #5A6E5A;
  --color-green-badge-bg: #E0F2E0;
  --color-green-badge-hover-bg: #BCE0BC;
  --color-yellow-badge: #8B6B2A;
  --color-yellow-badge-bg: #F2EBD0;
  --color-yellow-badge-hover-bg: #E0D0A0;
  --color-orange-badge: #8B6530;
  --color-orange-badge-bg: #F2E5D0;
  --color-orange-badge-hover-bg: #E0D0A0;

  /* ── Reaction ── */
  --color-reaction-bg: #0000000a;
  --color-reaction-active-bg: var(--color-primary-alpha-20);
  --color-reaction-hover-bg: var(--color-primary-alpha-30);

  /* ── Accent / Highlight / Overlay ── */
  --color-accent: var(--color-primary-light-1);
  --color-small-accent: var(--color-primary-light-5);
  --color-highlight-fg: var(--color-primary-light-4);
  --color-highlight-bg: var(--color-primary-light-6);
  --color-overlay-backdrop: #080808c0;
  --color-shadow: #00000060;

  /* ── Selection ── */
  --color-selection-bg: var(--warm-450);
  --color-selection-fg: var(--color-white);
  --checkerboard-color-1: #ffffff;
  --checkerboard-color-2: #e5e5e5;
  --color-project-board-bg: var(--color-secondary-light-2);
  --color-project-board-dark-label: var(--color-text-light-3);
  accent-color: var(--color-accent);

  /* ── ANSI terminal ── */
  --color-ansi-black: #2B2B2B;
  --color-ansi-red: #8B3A3A;
  --color-ansi-green: #5A6E5A;
  --color-ansi-yellow: #8B6B2A;
  --color-ansi-blue: #5A6B7A;
  --color-ansi-magenta: #8B5A7A;
  --color-ansi-cyan: #4A8B80;
  --color-ansi-white: #F2EDE4;
  --color-ansi-bright-black: #645C55;
  --color-ansi-bright-red: #C47272;
  --color-ansi-bright-green: #7F9B7F;
  --color-ansi-bright-yellow: #C4A45A;
  --color-ansi-bright-blue: #7A92A8;
  --color-ansi-bright-magenta: #B08DAD;
  --color-ansi-bright-cyan: #6DA8A0;
  --color-ansi-bright-white: #FAF8F5;

  /* ── Typography ── */
  --fonts-proportional: 'Source Serif 4', Georgia, 'Noto Serif', serif;
}