/* Stylify color tokens — light theme on :root, dark theme on [data-theme="dark"] */

:root {
  /* ---- Base ramps ---- */
  /* Blue — primary action + brand ink */
  --blue-950: #0F2036;
  --blue-900: #16304E;
  --blue-800: #1B3A5C;   /* brand ink navy */
  --blue-700: #1F4C9C;   /* primary action (matches product Accept button) */
  --blue-600: #2A5DB0;
  --blue-500: #3D71C4;
  --blue-400: #4A7FE0;
  --blue-200: #B9CBEC;
  --blue-100: #DFE8F7;
  --blue-50:  #EFF4FB;

  /* Sage — local/private, success, calm accents */
  --sage-800: #3E5233;
  --sage-700: #4E6141;
  --sage-600: #647A54;
  --sage-500: #8FA37A;
  --sage-300: #B8C4A9;
  --sage-100: #E4EAD9;
  --sage-50:  #F0F4E9;

  /* Beige — warm paper surfaces */
  --beige-400: #C9BCA1;
  --beige-300: #D9CFBB;
  --beige-200: #E8E0D0;
  --beige-100: #F1EBDF;
  --beige-50:  #F8F5EE;

  /* Warm neutrals */
  --gray-900: #1A1A18;
  --gray-800: #2E2E2B;
  --gray-700: #45453F;
  --gray-600: #5F5F58;
  --gray-500: #7C7C74;
  --gray-400: #A3A399;
  --gray-300: #C9C9C0;
  --gray-200: #E0E0D9;
  --gray-100: #EDEDE8;
  --gray-50:  #F6F6F3;
  --white: #ffffff;
  --black: #1A1A18;

  /* Amber — draft / pending state */
  --amber-800: #6E4E12;
  --amber-700: #8A6116;
  --amber-200: #F3E4BC;
  --amber-100: #FBF3DC;

  /* Red — destructive / error */
  --red-700: #A93226;
  --red-100: #FBE5E2;

  /* ---- Semantic aliases ---- */
  --accent: var(--blue-700);
  --accent-hover: var(--blue-800);
  --accent-soft: var(--blue-50);
  --accent-border: var(--blue-200);
  --on-accent: #ffffff;

  --ink: var(--blue-800);           /* headings, brand text */
  --text-body: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-link: var(--blue-600);
  --text-on-dark: #F4F2EC;
  --text-on-dark-muted: #A8B4C4;

  --surface-page: #ffffff;
  --surface-paper: var(--beige-50);  /* warm marketing/doc background */
  --surface-card: #ffffff;
  --surface-sunken: var(--gray-50);
  --surface-dark: var(--blue-900);   /* dark brand band */
  --surface-inverse: var(--gray-900);

  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-card: #ECECE6;
  --divider: var(--gray-100);

  --local-bg: var(--sage-100);       /* "running locally" banner */
  --local-fg: var(--sage-700);
  --local-dot: var(--sage-600);
  --success-bg: var(--sage-100);
  --success-fg: var(--sage-700);
  --draft-bg: var(--amber-100);      /* "draft — not in your document yet" */
  --draft-fg: var(--amber-800);
  --draft-border: var(--amber-200);
  --danger-bg: var(--red-100);
  --danger-fg: var(--red-700);

  --focus-ring: var(--blue-400);
  --shadow-card: 0 1px 2px rgba(26, 26, 24, 0.06);
  --shadow-overlay: 0 8px 32px rgba(15, 32, 54, 0.18);
  --scrim: rgba(15, 32, 54, 0.4);
}

[data-theme="dark"] {
  --accent: #6E96E0;
  --accent-hover: #8DACE8;
  --accent-soft: #1C2C44;
  --accent-border: #2E4468;
  --on-accent: #0F2036;

  --ink: #DCE5F2;
  --text-body: #E8E6DF;
  --text-secondary: #A8A89E;
  --text-muted: #83837A;
  --text-link: #7EA2E4;
  --text-on-dark: #F4F2EC;
  --text-on-dark-muted: #A8B4C4;

  --surface-page: #16161A;
  --surface-paper: #1B1B1F;
  --surface-card: #202026;
  --surface-sunken: #121216;
  --surface-dark: #0F2036;
  --surface-inverse: #F6F6F3;

  --border: #32323A;
  --border-strong: #43434C;
  --border-card: #2B2B32;
  --divider: #26262C;

  --local-bg: #23301E;
  --local-fg: #AFC79B;
  --local-dot: #8FA37A;
  --success-bg: #23301E;
  --success-fg: #AFC79B;
  --draft-bg: #33290F;
  --draft-fg: #E4C877;
  --draft-border: #4A3D1B;
  --danger-bg: #3C1E1A;
  --danger-fg: #E89A8E;

  --focus-ring: #6E96E0;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.5);
  --scrim: rgba(0, 0, 0, 0.55);
}