/* ============================================================
   Tanvir Creates — Color Primitives
   PALETTE: brand blue #040055, deep navy #010030, white #FFFFFF.
   Every neutral, tint, and surface is a blend of these three
   (via color-mix / alpha). The ONLY exception is a single
   functional red, reserved strictly for error / destructive UI.
   ============================================================ */

:root {
  /* --- The three brand colors --- */
  --white: #FFFFFF;
  --blue:  #040055; /* CORE brand blue — accent, CTAs, links, feature sections */
  --navy:  #010030; /* deepest navy — body text on white, darkest backgrounds */

  /* --- Neutral ramp: navy blended into white (cool grey, on-palette) --- */
  --gray-50:  color-mix(in srgb, var(--navy) 3%,  var(--white));
  --gray-100: color-mix(in srgb, var(--navy) 6%,  var(--white));
  --gray-200: color-mix(in srgb, var(--navy) 11%, var(--white));
  --gray-300: color-mix(in srgb, var(--navy) 18%, var(--white));
  --gray-400: color-mix(in srgb, var(--navy) 34%, var(--white));
  --gray-500: color-mix(in srgb, var(--navy) 52%, var(--white));
  --gray-600: color-mix(in srgb, var(--navy) 66%, var(--white));
  --gray-700: color-mix(in srgb, var(--navy) 80%, var(--white));
  --gray-800: color-mix(in srgb, var(--navy) 90%, var(--white));
  --gray-900: var(--navy);
  --black:    var(--navy);

  /* --- Accent lights: blue blended into white (for dark surfaces) --- */
  --accent-tint:  color-mix(in srgb, var(--blue) 55%, var(--white)); /* on-dark accent / links */
  --accent-light: color-mix(in srgb, var(--blue) 72%, var(--white)); /* on-dark hover / eyebrow */

  /* --- Dark-mode raw surfaces (blue lifted out of navy) --- */
  --ink-bg:       var(--navy);
  --ink-surface:  color-mix(in srgb, var(--blue) 45%, var(--navy));
  --ink-surface2: color-mix(in srgb, var(--blue) 72%, var(--navy));
  --ink-border:   color-mix(in srgb, var(--white) 14%, var(--navy));

  /* --- Functional error red (the ONLY non-blue hue — error states only) --- */
  --red-500: #C81E1E; /* form errors / destructive actions on light */
  --red-400: #F26060; /* brighter — for use on dark navy surfaces */

  /* --- Semantic status --- */
  --success: var(--blue);
  --danger:  var(--red-500);
}