/* ============================================================
   PLUR Solutions — Color tokens
   Derived from the brand logo (four indigo dots) and the
   product's dark indigo theme (#0c0c1d).
   ============================================================ */

:root {
  /* ---- Brand indigo scale ----------------------------------
     400–700 are sampled directly from the four logo dots.     */
  --indigo-50:  #eef0fb;
  --indigo-100: #dde2f7;
  --indigo-200: #bcc5ed;
  --indigo-300: #9aa6e2;
  --indigo-400: #7386d5; /* dot 1 — lightest periwinkle */
  --indigo-500: #5b6fbd; /* dot 2 */
  --indigo-600: #465bb0; /* dot 3 */
  --indigo-700: #2f4499; /* dot 4 — deep royal indigo */
  --indigo-800: #243573;
  --indigo-900: #161f47;
  --indigo-950: #0c0c1d; /* product theme color / page base */

  /* ---- Charcoal (wordmark) & neutral ink -------------------- */
  --ink-900: #161620;
  --ink-800: #20202e;
  --ink-700: #2a2a3a;

  /* ---- Dark-theme surface ladder (default brand context) ---- */
  --bg-base:     #0a0a17; /* deepest — page background */
  --bg-raised:   #0f0f22; /* large panels / sections */
  --surface-1:   #15152c; /* default card */
  --surface-2:   #1c1c38; /* nested / hover card */
  --surface-3:   #24244a; /* active / elevated */

  /* ---- Hairlines & borders --------------------------------- */
  --line-subtle:  rgba(255, 255, 255, 0.06);
  --line-default: rgba(255, 255, 255, 0.10);
  --line-strong:  rgba(255, 255, 255, 0.16);
  --line-accent:  rgba(115, 134, 213, 0.45);

  /* ---- Text on dark ---------------------------------------- */
  --text-primary:   #f6f7fc;
  --text-secondary: #b6b9cc;
  --text-muted:     #7e8199;
  --text-faint:     #565a72;
  --text-on-accent: #ffffff;

  /* ---- Neutral scale (for light surfaces / slides) --------- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f7fb;
  --neutral-100: #eceef5;
  --neutral-200: #dce0ea;
  --neutral-300: #c2c7d6;
  --neutral-400: #969cb2;
  --neutral-500: #6c7188;
  --neutral-600: #4c5066;
  --neutral-700: #353950;
  --neutral-800: #20222f;
  --neutral-900: #12131c;

  /* ---- Semantic status ------------------------------------- */
  --success: #34c98a;
  --success-soft: rgba(52, 201, 138, 0.14);
  --warning: #f2b347;
  --warning-soft: rgba(242, 179, 71, 0.14);
  --danger:  #f0616d;
  --danger-soft: rgba(240, 97, 109, 0.14);
  --info:    var(--indigo-400);
  --info-soft: rgba(115, 134, 213, 0.14);

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */

  /* Brand accent */
  --accent:          var(--indigo-400);
  --accent-strong:   var(--indigo-600);
  --accent-deep:     var(--indigo-700);
  --accent-soft:     rgba(115, 134, 213, 0.12);
  --accent-soft-hover: rgba(115, 134, 213, 0.20);

  /* Page + surfaces */
  --color-bg:        var(--bg-base);
  --color-bg-raised: var(--bg-raised);
  --surface-card:    var(--surface-1);
  --surface-card-hover: var(--surface-2);
  --surface-sunken:  var(--bg-raised);

  /* Text */
  --text-heading: var(--text-primary);
  --text-body:    var(--text-secondary);
  --text-label:   var(--text-muted);

  /* Borders */
  --border-card:   var(--line-default);
  --border-input:  var(--line-strong);
  --border-hairline: var(--line-subtle);

  /* Brand gradients */
  --gradient-dots: linear-gradient(90deg, #7386d5 0%, #5b6fbd 34%, #465bb0 67%, #2f4499 100%); /* @kind color */
  --gradient-accent: linear-gradient(135deg, #7386d5 0%, #4a5cb3 100%); /* @kind color */
  --gradient-deep: linear-gradient(160deg, #161f47 0%, #0c0c1d 100%); /* @kind color */
  --gradient-glow: radial-gradient(60% 60% at 50% 0%, rgba(115,134,213,0.22) 0%, rgba(115,134,213,0) 70%); /* @kind color */
}