/* ============================================================================
   theme.css — Gidit global LIGHT theme (single source of truth)

   HOW IT WORKS
   Every page defines its own color tokens in an inline `:root{}` block (legacy
   dark values). This file redeclares those same token names on `html:root`,
   which has HIGHER specificity than a bare `:root` — so these light values win
   regardless of where the page's inline <style> sits in the document. Linking
   this file on a page is therefore enough to flip all *token-driven* colors to
   light. (Hardcoded colors in a page's body CSS are fixed per-page.)

   Only COLOR tokens are overridden here. Size/shape/font tokens (--r, --radius,
   --font*, --grain) are intentionally left to each page.

   To retheme the whole site, edit this file.
   ============================================================================ */

html:root {
  /* ---- Brand purple -------------------------------------------------- */
  --purple: #7C3AED;
  --purple-bright: #8B5CF6;
  --purple-light: #A78BFA;
  --purple-soft: rgba(124, 58, 237, .10);
  --purple-glow: rgba(124, 58, 237, .18);

  /* Generic "accent" aliases some pages use — map to brand purple */
  --accent: #7C3AED;
  --accent-dark: #6D28D9;
  --accent-ink: #5B21B6;
  --accent-light: #A78BFA;
  --accent-soft: rgba(124, 58, 237, .10);
  --accent-glow: rgba(124, 58, 237, .18);
  --blue: #7C3AED;
  --blue-light: #A78BFA;
  --glow: rgba(124, 58, 237, .18);

  /* ---- Surfaces & ink (Apple-style light) --------------------------- */
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --bg-3: #ececf0;
  --card: #f5f5f7;
  --card-alt: #ececf0;
  --surface: #f5f5f7;
  --surface-2: #ececf0;
  --field: #ffffff;
  --rail: #f5f5f7;
  --bubble-bg: #f0f0f3;

  --text: #1d1d1f;     /* primary ink */
  --ink-2: #6e6e73;    /* secondary ink */
  --ink-3: #86868b;    /* tertiary ink */
  --muted: #6e6e73;
  --faint: #86868b;
  --dim: #86868b;

  /* Lines / borders */
  --line: #d2d2d7;
  --line-soft: #e8e8ed;
  --border: #d2d2d7;
  --border-2: #c7c7cc;

  /* Legacy gray ramp — inverted so hierarchy is preserved on white.
     (dark: gray1=lightest text … gray4=darkest surface) */
  --gray1: #6e6e73;    /* most-visible muted text */
  --gray2: #86868b;    /* secondary muted text */
  --gray3: #aeaeb2;    /* faint text / subtle divider */
  --gray4: #e8e8ed;    /* light surface / hairline */

  /* ---- Status / secondary accents (readable on white) --------------- */
  --good: #15803d;
  --green: #059669;
  --green-bright: #10B981;
  --green-light: #34D399;
  --green-dim: rgba(16, 185, 129, .08);
  --green-glow: rgba(16, 185, 129, .18);
  --emerald: #059669;
  --emerald-light: #34D399;
  --teal: #0d9488;
  --teal-bright: #14b8a6;
  --teal-bg: rgba(13, 148, 136, .08);

  --cyan: #0891b2;
  --cyan-glow: rgba(8, 145, 178, .18);

  --warn: #c2410c;
  --amber: #b45309;
  --amber-light: #d97706;

  --red: #dc2626;
  --rose: #dc2626;
  --rose-light: #f87171;
  --rose-dark: #b91c1c;
  --rose-bg: rgba(220, 38, 38, .08);
  --pink: #db2777;

  /* ---- Elevation ---------------------------------------------------- */
  --shadow: 0 6px 24px -12px rgba(40, 30, 80, .18);
  --shadow-md: 0 24px 50px -30px rgba(40, 30, 80, .30);
}

/* ---- Base: make the document itself light ---------------------------- */
:root { color-scheme: light; }

html { background: #ffffff; }

body {
  background: var(--bg, #ffffff);
  color: var(--text, #1d1d1f);
}

::selection { background: rgba(124, 58, 237, .20); color: #1d1d1f; }

/* Keep autofilled inputs on a light surface */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #1d1d1f;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}