/* ============================================================
   Eurekant — Color tokens
   Primitives lifted verbatim from the Eurekant website
   (css/eurekant-v2.webflow.css :root). Semantic aliases add a
   light scheme (default) and a dark scheme (data-theme="dark").
   ============================================================ */

:root {
  /* ---- Brand primitives: Denim (primary) ---- */
  --ek-denim-lightest: #e7f2f9;
  --ek-denim-lighter:  #cfe5f3;
  --ek-denim-light:    #59a4d6;
  --ek-denim:          #137dc5;   /* PRIMARY brand blue */
  --ek-denim-dark:     #0f649d;
  --ek-denim-darker:   #07324e;
  --ek-denim-darkest:  #05253b;

  /* ---- Brand primitives: Picton Blue (secondary / accent) ---- */
  --ek-picton-lightest: #e8f4fc;
  --ek-picton-lighter:  #d2eafa;
  --ek-picton-light:    #63b7f0;
  --ek-picton:          #2199ea;   /* SECONDARY / bright accent */
  --ek-picton-dark:     #1a7abb;
  --ek-picton-darker:   #0d3d5d;
  --ek-picton-darkest:  #092d46;

  /* ---- Neutrals ---- */
  --ek-white:            #ffffff;
  --ek-neutral-lightest: #f2f2f2;
  --ek-neutral-lighter:  #d9d9da;
  --ek-neutral-light:    #b3b4b6;
  --ek-neutral:          #808385;
  --ek-neutral-dark:     #4d5254;
  --ek-neutral-darker:   #1b2024;
  --ek-neutral-darkest:  #02080c;   /* near-black with a cool tint */
  --ek-black:            #000000;

  /* ---- Functional accents (derived, kept in-family) ---- */
  --ek-success:  #1f8a5b;
  --ek-warning:  #d99115;
  --ek-danger:   #d2483f;
  --ek-info:     var(--ek-picton);

  /* ---- Signature gradient ---- */
  --ek-gradient-brand: linear-gradient(135deg, var(--ek-picton) 20%, var(--ek-denim));
  --ek-gradient-brand-hover: linear-gradient(135deg, var(--ek-picton-dark), var(--ek-denim-dark));
  --ek-gradient-deep: linear-gradient(135deg, var(--ek-denim-darker), var(--ek-picton-darkest));

  /* ---- Opacity ramps (neutral-darkest over light) ---- */
  --ek-ink-05: #02080c0d;
  --ek-ink-10: #02080c1a;
  --ek-ink-15: #02080c26;
  --ek-ink-20: #02080c33;
  --ek-ink-30: #02080c4d;
  --ek-ink-40: #02080c66;
  --ek-ink-50: #02080c80;
  --ek-ink-60: #02080c99;
  /* ---- Opacity ramps (white over dark) ---- */
  --ek-on-05: #ffffff0d;
  --ek-on-10: #ffffff1a;
  --ek-on-15: #ffffff26;
  --ek-on-20: #ffffff33;
  --ek-on-30: #ffffff4d;
  --ek-on-40: #ffffff66;
  --ek-on-50: #ffffff80;
  --ek-on-60: #ffffff99;
}

/* ============================================================
   SEMANTIC ALIASES — light scheme (default)
   ============================================================ */
:root,
[data-theme="light"] {
  --surface-page:      var(--ek-white);
  --surface-raised:    var(--ek-neutral-lightest);   /* cards, panels */
  --surface-sunken:    #e9eaeb;
  --surface-inset:     var(--ek-ink-05);
  --surface-overlay:   var(--ek-white);
  --surface-inverse:   var(--ek-neutral-darkest);
  --surface-brand-subtle: var(--ek-denim-lightest);

  --text-strong:   var(--ek-neutral-darkest);
  --text-body:     var(--ek-neutral-dark);
  --text-muted:    var(--ek-neutral);
  --text-faint:    var(--ek-neutral-light);
  --text-on-brand: var(--ek-white);
  --text-inverse:  var(--ek-neutral-lightest);
  --text-link:     var(--ek-denim);

  --border-subtle:  var(--ek-ink-10);
  --border-default: var(--ek-ink-15);
  --border-strong:  var(--ek-ink-30);
  --border-focus:   var(--ek-picton);

  --accent:          var(--ek-denim);
  --accent-hover:    var(--ek-denim-dark);
  --accent-contrast: var(--ek-white);
  --accent-bright:   var(--ek-picton);

  --field-bg:      var(--ek-white);
  --field-border:  var(--ek-ink-15);
  --field-text:    var(--ek-neutral-darkest);
  --field-placeholder: var(--ek-neutral);

  color-scheme: light;
}

/* ============================================================
   SEMANTIC ALIASES — dark scheme
   Warm deep-navy surfaces, a richer 4-stop brand gradient and a
   picton-blue focus glow.
   ============================================================ */
[data-theme="dark"] {
  --surface-page:      #0d1f38;                /* warm navy */
  --surface-raised:    #0f2540;                /* cards, panels */
  --surface-sunken:    #0b1d34;
  --surface-inset:     var(--ek-on-05);
  --surface-overlay:   #122a4a;                /* lifted dialogs/menus */
  --surface-inverse:   var(--ek-neutral-lightest);
  --surface-brand-subtle: #0e2c4d;

  --text-strong:   #dce9f5;
  --text-body:     rgba(210,228,245,0.88);
  --text-muted:    rgba(180,205,230,0.68);
  --text-faint:    rgba(160,185,215,0.50);
  --text-on-brand: var(--ek-white);
  --text-inverse:  var(--ek-neutral-darkest);
  --text-link:     var(--ek-picton);

  --border-subtle:  rgba(255,255,255,0.08);
  --border-default: rgba(255,255,255,0.15);
  --border-strong:  rgba(160,185,215,0.50);
  --border-focus:   var(--ek-picton);

  --accent:          var(--ek-picton);          /* action bg */
  --accent-hover:    var(--ek-denim);           /* action bg hover */
  --accent-contrast: var(--ek-white);
  --accent-bright:   #06a1e4;                    /* sky */

  /* richer 4-stop gradient + sky variant for dark */
  --ek-gradient-brand: linear-gradient(135deg, #245099 0%, #137DC5 45%, #2199ea 80%, #06a1e4 100%); /* @kind color */
  --ek-gradient-brand-hover: linear-gradient(135deg, #1d4080 0%, #0f649d 45%, #137DC5 80%, #2199ea 100%); /* @kind color */
  --ek-gradient-deep: linear-gradient(135deg, #0d1f38 0%, #0f3a63 60%, #137DC5 130%); /* @kind color */

  --field-bg:      #0b1d34;
  --field-border:  rgba(255,255,255,0.15);
  --field-text:    #dce9f5;
  --field-placeholder: rgba(160,185,215,0.50);

  color-scheme: dark;
}