/*
 * Design tokens. Load first: every other stylesheet reads these.
 *
 * Three tiers:
 *   1. --oc-*        Open Color primitives (raw values, the only hex in the theme)
 *   2. brand aliases --blue, --red-light, --gray-100 … (what components use)
 *   3. semantic      --body-color, --link-color, --border-base … (role-based)
 *
 * Dark pages: <body data-theme="dark"> (ACF "dark_page") flips color-scheme,
 * and every light-dark() below resolves from it. Don't write
 * [data-theme="dark"] override blocks for colors; use light-dark().
 *
 * inc/colors.php reads this file to build the editor color pickers
 * (Beaver Builder, TinyMCE, ACF). It resolves brand aliases through var()
 * to hex, so keep picker colors as plain `#hex` or `var(--x)` values.
 */

:root {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}

/* 1. primitives */
:root {
  /* Open Color v1.9.1 primitives: https://yeun.github.io/open-color/
     generated from open-color.json; don't hand-edit values. */
  --oc-white: #ffffff;
  --oc-black: #000000;

  --oc-gray-0: #f8f9fa;
  --oc-gray-1: #f1f3f5;
  --oc-gray-2: #e9ecef;
  --oc-gray-3: #dee2e6;
  --oc-gray-4: #ced4da;
  --oc-gray-5: #adb5bd;
  --oc-gray-6: #868e96;
  --oc-gray-7: #495057;
  --oc-gray-8: #343a40;
  --oc-gray-9: #212529;

  --oc-red-0: #fff5f5;
  --oc-red-1: #ffe3e3;
  --oc-red-2: #ffc9c9;
  --oc-red-3: #ffa8a8;
  --oc-red-4: #ff8787;
  --oc-red-5: #ff6b6b;
  --oc-red-6: #fa5252;
  --oc-red-7: #f03e3e;
  --oc-red-8: #e03131;
  --oc-red-9: #c92a2a;

  --oc-pink-0: #fff0f6;
  --oc-pink-1: #ffdeeb;
  --oc-pink-2: #fcc2d7;
  --oc-pink-3: #faa2c1;
  --oc-pink-4: #f783ac;
  --oc-pink-5: #f06595;
  --oc-pink-6: #e64980;
  --oc-pink-7: #d6336c;
  --oc-pink-8: #c2255c;
  --oc-pink-9: #a61e4d;

  --oc-grape-0: #f8f0fc;
  --oc-grape-1: #f3d9fa;
  --oc-grape-2: #eebefa;
  --oc-grape-3: #e599f7;
  --oc-grape-4: #da77f2;
  --oc-grape-5: #cc5de8;
  --oc-grape-6: #be4bdb;
  --oc-grape-7: #ae3ec9;
  --oc-grape-8: #9c36b5;
  --oc-grape-9: #862e9c;

  --oc-violet-0: #f3f0ff;
  --oc-violet-1: #e5dbff;
  --oc-violet-2: #d0bfff;
  --oc-violet-3: #b197fc;
  --oc-violet-4: #9775fa;
  --oc-violet-5: #845ef7;
  --oc-violet-6: #7950f2;
  --oc-violet-7: #7048e8;
  --oc-violet-8: #6741d9;
  --oc-violet-9: #5f3dc4;

  --oc-indigo-0: #edf2ff;
  --oc-indigo-1: #dbe4ff;
  --oc-indigo-2: #bac8ff;
  --oc-indigo-3: #91a7ff;
  --oc-indigo-4: #748ffc;
  --oc-indigo-5: #5c7cfa;
  --oc-indigo-6: #4c6ef5;
  --oc-indigo-7: #4263eb;
  --oc-indigo-8: #3b5bdb;
  --oc-indigo-9: #364fc7;

  --oc-blue-0: #e7f5ff;
  --oc-blue-1: #d0ebff;
  --oc-blue-2: #a5d8ff;
  --oc-blue-3: #74c0fc;
  --oc-blue-4: #4dabf7;
  --oc-blue-5: #339af0;
  --oc-blue-6: #228be6;
  --oc-blue-7: #1c7ed6;
  --oc-blue-8: #1971c2;
  --oc-blue-9: #1864ab;

  --oc-cyan-0: #e3fafc;
  --oc-cyan-1: #c5f6fa;
  --oc-cyan-2: #99e9f2;
  --oc-cyan-3: #66d9e8;
  --oc-cyan-4: #3bc9db;
  --oc-cyan-5: #22b8cf;
  --oc-cyan-6: #15aabf;
  --oc-cyan-7: #1098ad;
  --oc-cyan-8: #0c8599;
  --oc-cyan-9: #0b7285;

  --oc-teal-0: #e6fcf5;
  --oc-teal-1: #c3fae8;
  --oc-teal-2: #96f2d7;
  --oc-teal-3: #63e6be;
  --oc-teal-4: #38d9a9;
  --oc-teal-5: #20c997;
  --oc-teal-6: #12b886;
  --oc-teal-7: #0ca678;
  --oc-teal-8: #099268;
  --oc-teal-9: #087f5b;

  --oc-green-0: #ebfbee;
  --oc-green-1: #d3f9d8;
  --oc-green-2: #b2f2bb;
  --oc-green-3: #8ce99a;
  --oc-green-4: #69db7c;
  --oc-green-5: #51cf66;
  --oc-green-6: #40c057;
  --oc-green-7: #37b24d;
  --oc-green-8: #2f9e44;
  --oc-green-9: #2b8a3e;

  --oc-lime-0: #f4fce3;
  --oc-lime-1: #e9fac8;
  --oc-lime-2: #d8f5a2;
  --oc-lime-3: #c0eb75;
  --oc-lime-4: #a9e34b;
  --oc-lime-5: #94d82d;
  --oc-lime-6: #82c91e;
  --oc-lime-7: #74b816;
  --oc-lime-8: #66a80f;
  --oc-lime-9: #5c940d;

  --oc-yellow-0: #fff9db;
  --oc-yellow-1: #fff3bf;
  --oc-yellow-2: #ffec99;
  --oc-yellow-3: #ffe066;
  --oc-yellow-4: #ffd43b;
  --oc-yellow-5: #fcc419;
  --oc-yellow-6: #fab005;
  --oc-yellow-7: #f59f00;
  --oc-yellow-8: #f08c00;
  --oc-yellow-9: #e67700;

  --oc-orange-0: #fff4e6;
  --oc-orange-1: #ffe8cc;
  --oc-orange-2: #ffd8a8;
  --oc-orange-3: #ffc078;
  --oc-orange-4: #ffa94d;
  --oc-orange-5: #ff922b;
  --oc-orange-6: #fd7e14;
  --oc-orange-7: #f76707;
  --oc-orange-8: #e8590c;
  --oc-orange-9: #d9480f;
}

/* 2. brand aliases. Brand "blue" is OC cyan, "blurple" is OC indigo,
   "purple" is OC violet. */
:root {
  --true-black: var(--oc-black);
  --true-white: var(--oc-white);
  --black: #1a1e21; /* brand near-black, intentionally off-palette */
  --white: var(--true-white);

  --gray-000: var(--oc-gray-0);
  --gray-100: var(--oc-gray-1);
  --gray-200: var(--oc-gray-2);
  --gray-300: var(--oc-gray-3);
  --gray-400: var(--oc-gray-4);
  --gray-500: var(--oc-gray-5);
  --gray-600: var(--oc-gray-6);
  --gray-700: var(--oc-gray-7);
  --gray-800: var(--oc-gray-8);
  --gray-900: var(--oc-gray-9);

  --blue-lighter: var(--oc-cyan-1);
  --blue-light: var(--oc-cyan-3);
  --blue: var(--oc-cyan-6);
  --blue-dark: var(--oc-cyan-8);
  --blue-darker: var(--oc-cyan-9);

  --blurple-lighter: var(--oc-indigo-1);
  --blurple-light: var(--oc-indigo-3);
  --blurple: var(--oc-indigo-6);
  --blurple-dark: var(--oc-indigo-8);
  --blurple-darker: var(--oc-indigo-9);

  --purple-lighter: var(--oc-violet-1);
  --purple-light: var(--oc-violet-3);
  --purple: var(--oc-violet-6);
  --purple-dark: var(--oc-violet-8);
  --purple-darker: var(--oc-violet-9);

  --yellow-lighter: var(--oc-yellow-1);
  --yellow-light: var(--oc-yellow-3);
  --yellow: var(--oc-yellow-6);
  --yellow-dark: var(--oc-yellow-8);
  --yellow-darker: var(--oc-yellow-9);

  --green-lightest: var(--oc-green-0);
  --green-lighter: var(--oc-green-2);
  --green-light: var(--oc-green-4);
  --green: var(--oc-green-6);
  --green-dark: var(--oc-green-8);
  --green-hover: var(--oc-green-8);
  --green-darker: var(--oc-green-9);
  --green-darkest: var(--oc-green-9);

  --pink-lightest: var(--oc-pink-0);
  --pink-lighter: var(--oc-pink-2);
  --pink-light: var(--oc-pink-4);
  --pink: var(--oc-pink-6);
  --pink-dark: var(--oc-pink-8);
  --pink-darker: var(--oc-pink-9);
  --pink-darkest: var(--oc-pink-9);

  --red-lightest: var(--oc-red-0);
  --red-lighter: var(--oc-red-2);
  --red-light: var(--oc-red-4);
  --red: var(--oc-red-6);
  --red-dark: var(--oc-red-8);
  --red-hover: var(--oc-red-8);
  --red-darker: var(--oc-red-9);
  --red-darkest: var(--oc-red-9);

  /* legacy numbered grays. Beaver Builder content references var(--gray-6),
     so keep these until the DB no longer uses them. */
  --gray-0: var(--oc-gray-0);
  --gray-1: var(--oc-gray-1);
  --gray-2: var(--oc-gray-2);
  --gray-3: var(--oc-gray-3);
  --gray-4: var(--oc-gray-4);
  --gray-5: var(--oc-gray-5);
  --gray-6: var(--oc-gray-6);
  --gray-7: var(--oc-gray-7);
  --gray-8: var(--oc-gray-8);
  --gray-9: var(--oc-gray-9);
}

/* 3. semantic */
:root {
  --color-bad: var(--red);
  --color-good: var(--green);
  --color-info: var(--blue);
  --color-warn: light-dark(var(--yellow-dark), var(--yellow));

  --link-color: var(--blurple);
  --link-hover-color: var(--blurple-dark);
  --link-active-color: var(--blurple-darker);

  --scrollbar-color: light-dark(var(--gray-300), var(--gray-800));
  --scrollbar-bg-color: light-dark(var(--white), var(--black));

  --border-base-stroke-color: light-dark(var(--oc-gray-4), var(--oc-gray-7));
  --border-base: 1px solid var(--border-base-stroke-color);

  --logo-black: light-dark(var(--black), var(--white));
  --logo-red: var(--red);

  --text-meta-color: light-dark(var(--gray-600), var(--gray-500));
  --heading-color: light-dark(var(--black), var(--gray-200));

  --body-bg-color: light-dark(var(--white), var(--black));
  --body-color: light-dark(var(--black), var(--gray-200));
}

/* spacing, type, and effects */
:root {
  --space-0: 0px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-52: 52px;
  --space-56: 56px;
  --space-60: 60px;
  --space-64: 64px;
  --space-80: 80px;
  --space-120: 120px;
  --space-160: 160px;

  --padding-base: var(--space-20);

  --text-0: 0px;
  --text-4: 4px;
  --text-6: 6px;
  --text-8: 8px;
  --text-10: 10px;
  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-20: 20px;
  --text-24: 24px;
  --text-28: 28px;
  --text-32: 32px;
  --text-36: 36px;
  --text-40: 40px;
  --text-44: 44px;
  --text-48: 48px;
  --text-52: 52px;
  --text-56: 56px;
  --text-60: 60px;
  --text-64: 64px;
  --text-80: 80px;
  --text-120: 120px;
  --text-160: 160px;

  /* font files are enqueued in functions.php (Google Fonts) */
  --font-family-headings: 'Poppins', helvetica, arial, sans-serif;
  --font-family-sans-serif: 'Inter', helvetica, arial, sans-serif;
  --font-family-mono: 'IBM Plex Mono', monospace;
  --font-family-icon: 'remixicon';

  --body-font: var(--font-family-sans-serif);

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-xs: var(--text-10);
  --font-size-sm: var(--text-12);
  --font-size-med: var(--text-14);
  --font-size-base: var(--text-16);
  --font-size-lg: var(--text-20);
  --font-size-xl: var(--text-24);

  --line-height-headings: 1.2;
  --line-height-base: 1.4;
  --line-height-tight: 1.1;

  --radius-small: 3px;
  --radius-base: 6px;
  --radius-large: 9px;
  --radius-xlarge: 24px;

  --shadow-base: 4px 4px 0px var(--black);
  --shadow-hover: 3px 3px 0px var(--black);
  --shadow-active: 2px 2px 0px var(--black);
  --shadow-soft-1: 0 1px 2px rgb(0 0 0 / .06), 0 1px 1px rgb(0 0 0 / .04);
  --shadow-soft-2: 0 3px 6px rgb(0 0 0 / .08), 0 6px 12px rgb(0 0 0 / .06);

  --transition-default: all linear .1s;

  /* layout-wide tokens */
  --grid-gap: var(--space-24);
}