/* ============================================================
   DarkCortex — Color tokens
   Dark-first cybersecurity palette. Electric cyan = neural/synapse
   brand signal (from the shield mark). Coral = warm Mexican CTA.
   Violet = secondary neural energy, used sparingly in glows.
   ============================================================ */
:root {
  /* --- Ink scale: near-black blues, the foundation of the dark UI --- */
  --ink-950: #06080C;   /* deepest void / page base */
  --ink-900: #090C12;   /* app background */
  --ink-850: #0D1117;   /* primary surface */
  --ink-800: #11161F;   /* raised surface */
  --ink-700: #161D28;   /* card */
  --ink-600: #1D2632;   /* elevated card / input */
  --ink-500: #283341;   /* hairline-strong / divider */
  --ink-400: #3A4656;   /* disabled stroke */

  /* --- Brand cyan: the synapse glow --- */
  --cyan-700: #006E85;
  --cyan-600: #008CAC;
  --cyan-500: #00B4D8;
  --cyan-400: #00D9FF;  /* PRIMARY brand accent */
  --cyan-300: #5CE6FF;
  --cyan-200: #9FF1FF;

  /* --- Action coral: warmth + conversion urgency --- */
  --coral-700: #B83D12;
  --coral-600: #E8531D;
  --coral-500: #FF6B35;  /* PRIMARY cta */
  --coral-400: #FF8A5C;
  --coral-300: #FFB494;

  /* --- Violet: secondary neural energy (glows, gradients only) --- */
  --violet-600: #6D28D9;
  --violet-500: #7C3AED;
  --violet-400: #9F67F0;

  /* --- Semantic --- */
  --green-500: #22C55E;
  --green-400: #4ADE80;
  --amber-500: #F59E0B;
  --amber-400: #FBBF24;
  --red-500: #EF4444;
  --red-400: #F87171;

  /* --- Warm paper (accessible / light sections) --- */
  --paper-100: #F6F3ED;  /* warm off-white, Cloud-Dancer adjacent */
  --paper-200: #ECE7DC;
  --paper-300: #DAD2C3;
  --paper-ink: #14181F;  /* text on paper */

  /* ===========================================================
     SEMANTIC ALIASES — reference these in components
     =========================================================== */
  /* Surfaces */
  --bg-app: var(--ink-900);
  --bg-base: var(--ink-950);
  --surface: var(--ink-850);
  --surface-raised: var(--ink-800);
  --surface-card: var(--ink-700);
  --surface-input: var(--ink-600);
  --surface-paper: var(--paper-100);

  /* Text on dark */
  --text-strong: #F4F8FC;
  --text-body: #C8D2DE;
  --text-muted: #8B98A9;
  --text-faint: #7C8A9C;   /* lightened to meet AA (4.5:1) for small mono labels */
  --text-on-cyan: #04222B;
  --text-on-coral: #FFFFFF;
  --text-on-paper: var(--paper-ink);

  /* Brand roles */
  --brand: var(--cyan-400);
  --brand-strong: var(--cyan-500);
  --brand-soft: rgba(0, 217, 255, 0.12);
  --action: #C2420F;
  --action-hover: #D24A14;
  --action-press: #A2380C;
  --action-soft: rgba(232, 83, 29, 0.12);
  --action-text: var(--coral-400);  /* lighter coral for coral-AS-TEXT on dark (AA) */

  /* Borders / hairlines */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-brand: rgba(0, 217, 255, 0.45);

  /* Semantic roles */
  --success: var(--green-500);
  --success-soft: rgba(34, 197, 94, 0.13);
  --warning: var(--amber-500);
  --warning-soft: rgba(245, 158, 11, 0.13);
  --danger: var(--red-500);
  --danger-soft: rgba(239, 68, 68, 0.13);
  --info: var(--cyan-400);

  /* Text color to sit ON a solid semantic fill (flips per theme for AA) */
  --on-success: #04140A;
  --on-warning: #1C1303;
  --on-danger: #FFFFFF;

  /* Focus ring (WCAG visible) */
  --focus-ring: rgba(0, 217, 255, 0.55);
}

/* ===========================================================
   LIGHT THEME — "Cloud Dancer" (Pantone 2026)
   Warm off-white base, violet+cyan aurora accents.
   The approachable, non-intimidating face for non-technical
   audiences. Toggle on a root ancestor: [data-theme="light"].
   Same semantic API as the dark default — every component that
   references the aliases below swaps automatically.
   =========================================================== */
[data-theme="light"] {
  color-scheme: light;

  /* Cloud-Dancer paper scale */
  --cloud-50: #FBFAF7;
  --cloud-100: #F0ECE5;  /* Pantone Cloud Dancer */
  --cloud-200: #E6E1D7;
  --cloud-300: #D8D1C4;
  --cloud-400: #C2B9A8;

  /* Aurora accents tuned for light contrast */
  --aurora-violet: #6D28D9;
  --aurora-cyan: #0891B2;

  /* Surfaces */
  --bg-app: var(--cloud-100);
  --bg-base: var(--cloud-50);
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-input: var(--cloud-50);
  --surface-paper: var(--cloud-100);

  /* Text on paper (>=7:1 on cloud) */
  --text-strong: #15110C;
  --text-body: #36302A;
  --text-muted: #6B6358;
  --text-faint: #7C7264;   /* darkened for AA on warm paper */
  --text-on-cyan: #FFFFFF;
  --text-on-coral: #FFFFFF;
  --text-on-paper: #15110C;

  /* Brand roles — cyan darkened on light so white-on-brand + brand-as-text pass AA */
  --brand: #0E7490;        /* white-on-brand 5.4:1, brand-as-text 5.4:1 on white */
  --brand-strong: #0B5F75;
  --brand-soft: rgba(14, 116, 144, 0.10);
  --action: #C2420F;
  --action-hover: #D24A14;
  --action-press: #A2380C;
  --action-soft: rgba(232, 83, 29, 0.10);
  --action-text: #A2380C;  /* deep coral for coral-AS-TEXT on light (AAA) */

  /* Borders / hairlines (dark-on-light now) */
  --border-subtle: rgba(21, 17, 12, 0.06);
  --border: rgba(21, 17, 12, 0.12);
  --border-strong: rgba(21, 17, 12, 0.20);
  --border-brand: rgba(14, 116, 144, 0.45);

  /* Semantic roles — darkened for AA as text/icons on white */
  --success: #15803D;
  --success-soft: rgba(21, 128, 61, 0.12);
  --warning: #B45309;
  --warning-soft: rgba(180, 83, 9, 0.12);
  --danger: #DC2626;
  --danger-soft: rgba(220, 38, 38, 0.12);
  --info: #0E7490;

  /* On-fill text (light theme): white reads better on the darkened fills */
  --on-success: #FFFFFF;
  --on-warning: #FFFFFF;
  --on-danger: #FFFFFF;

  --focus-ring: rgba(109, 40, 217, 0.5);
}