/* =================================================================
   UXOVIA · COLOR TOKENS
   Dark-first. Electric Cobalt primary, purple logo accent, on pure black.
   Depth comes from glass surfaces + brand-mesh, never from a colored ground.
   ================================================================= */

:root {
  /* ─────────────────── Brand ─────────────────── */
  --brand:           #0055FE;                /* electric cobalt — primary, used sparingly */
  --brand-hover:     #1F6BFF;
  --brand-press:     #0048D6;
  --brand-soft:      rgba(0, 85, 254, 0.18);
  --brand-faint:     rgba(0, 85, 254, 0.06);
  --brand-glow:      rgba(0, 85, 254, 0.40);
  /* --brand als color: erreicht auf keiner Flaeche AA — 3,73:1 auf reinem Schwarz,
     2,93:1 auf .glass-feature, deren blauer Radial genau unter dem Eyebrow liegt.
     Fuer Text immer --brand-text: dunkelster Ton mit Reserve, min 4,92:1 gemessen. */
  --brand-text:      #4D88FE;

  --purple:          #7C5CBF;                /* uxovia logo purple — almost only in the gradient */
  --cyan:            #00C8EE;                /* highlight cyan */

  /* ─────────────────── Brand gradients ─────────────────── */
  --gradient-brand:  linear-gradient(135deg, #0055FE 0%, #7C5CBF 100%); /* @kind color */
  --gradient-soft:   linear-gradient(135deg, rgba(0,85,254,.55) 0%, rgba(124,92,191,.55) 100%); /* @kind color */
  --gradient-text:   linear-gradient(135deg, #ffffff 0%, #c4d0ff 60%, #7C5CBF 100%); /* @kind color */
  --gradient-border: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 45%, rgba(0,85,254,.32) 100%); /* @kind color */
  --gradient-mesh:
    radial-gradient(55% 40% at 82% -5%,  rgba(0,85,254,.14),  transparent 60%),
    radial-gradient(45% 35% at -5% 100%, rgba(124,92,191,.08), transparent 65%); /* @kind color */
  /* Lesegrund fuer Text, der auf dem bewegten Wasser-Hero steht. Das Wasser hat
     unter der linken Herospalte seine hellsten Stellen, und weil es animiert
     ist, schwankt der Kontrast mit der Welle. Der Verlauf daempft es dort und
     laeuft nach aussen auf null aus, damit keine sichtbare Kante entsteht.
     Der Ton ist nicht reines Schwarz, sondern das Blauschwarz des Wassers.
     Die waagerechte Ausdehnung haengt an der rechten Kante und ist in rem
     angegeben, nicht in Prozent: die Flaeche darunter reicht links bis ueber
     den Bildschirmrand, damit dort nichts abgeschnitten wird, und eine
     Prozentangabe wuerde mit dieser Breite mitwachsen. Senkrecht bleibt es
     Prozent, damit der Fleck mit der Spaltenhoehe mitgeht. */
  --gradient-lesegrund:
    radial-gradient(ellipse 35rem 72% at right 30rem top 58%,
      rgba(4,6,12,.86) 0%,
      rgba(4,6,12,.62) 42%,
      rgba(4,6,12,.24) 68%,
      rgba(4,6,12,0)  82%); /* @kind color */

  /* ─────────────────── Abgeleitete Toene ───────────────────
     Aufhellungen und Abdunklungen der Markenfarben. Sie standen bis zum
     21.08.2026 als rohe Zahlenwerte in den CSS-Dateien.

     Bewusst als eigene Token und nicht per color-mix aus --brand und Co.
     abgeleitet: nachgerechnet trifft keine Formel auch nur eine dieser
     Farben exakt, und 21 der 32 waeren sichtbar anders. Sie sind von Hand
     gewaehlt, vermutlich mit Blick auf Kontrast auf dunklem Grund.
     Preis dafuer: wer eine Markenfarbe aendert, zieht diese Toene von Hand nach.

     Benannt nach Helligkeit, von zart (hellster) bis nacht (dunkelster). */

  --kobalt-zart:             #CDD9FF;  /* Helligkeit 90 % */
  --kobalt-hero:             #C4D0FF;  /* Helligkeit 88 %, nur in der Hero-Ueberschrift */
  --kobalt-blass:            #9FC4FF;  /* Helligkeit 81 % */
  --kobalt-blass-warm:       #9DB6FF;  /* Helligkeit 81 %, violettstichiger als -blass */
  --kobalt-hell:             #6FA8FF;  /* Helligkeit 72 % */
  --kobalt-licht:            #4A6BFF;  /* Helligkeit 65 % */
  --kobalt-klar:             #3D8BFF;  /* Helligkeit 62 % */
  --kobalt-mittel:           #1CA0FB;  /* Helligkeit 55 % */
  --kobalt-satt:             #0042C9;  /* Helligkeit 39 % */
  --kobalt-tief:             #0A2A7A;  /* Helligkeit 26 % */
  --kobalt-nacht:            #0B0D13;  /* Helligkeit 6 % */

  --violett-zart:            #C9B4FF;  /* Helligkeit 85 % */
  --violett-blass:           #B39CFB;  /* Helligkeit 80 % */
  --violett-hell:            #9B6BFF;  /* Helligkeit 71 % */
  --violett-licht:           #9B7BDB;  /* Helligkeit 67 % */
  --violett-klar:            #8560C6;  /* Helligkeit 58 % */
  --violett-satt:            #5B3F94;  /* Helligkeit 41 % */
  --violett-tief:            #3A2A63;  /* Helligkeit 28 % */

  --cyan-zart:               #BDF3FF;  /* Helligkeit 87 % */
  --cyan-hell:               #6FE6FF;  /* Helligkeit 72 % */
  --cyan-klar:               #35D6F5;  /* Helligkeit 58 % */
  --cyan-satt:               #00A2C2;  /* Helligkeit 38 % */
  --cyan-tief:               #064A5E;  /* Helligkeit 20 % */
  --cyan-nacht:              #04212B;  /* Helligkeit 9 % */

  --bernstein-hell:          #F5C26E;  /* Helligkeit 70 % */
  --bernstein-licht:         #FFBA4D;  /* Helligkeit 65 % */
  --bernstein-glut:          #FF7A45;  /* Helligkeit 64 %, Farbton 17 statt 37 Grad */
  --bernstein-mittel:        #DB8F0E;  /* Helligkeit 46 % */
  --bernstein-tief:          #6E3F06;  /* Helligkeit 23 % */
  --bernstein-nacht:         #2A1A00;  /* Helligkeit 8 % */

  --gruen-hell:              #85E8B6;  /* Helligkeit 72 % */
  --gruen-licht:             #6FE6A8;  /* Helligkeit 67 % */


  /* ─────────────────── Surfaces ─────────────────── */
  --bg:              #000000;                /* pure black page ground */
  --bg-alt:          #050507;
  --bg-elevated:     #0A0A0F;
  --bg-ink:          #050508;

  --surface:         rgba(255, 255, 255, 0.04);
  --surface-2:       rgba(255, 255, 255, 0.06);
  --surface-3:       rgba(255, 255, 255, 0.09);
  --surface-glass:   rgba(255, 255, 255, 0.05);

  /* ─────────────────── Borders ─────────────────── */
  --border:          rgba(255, 255, 255, 0.08);
  --border-strong:   rgba(255, 255, 255, 0.16);
  --border-faint:    rgba(255, 255, 255, 0.04);
  --border-brand:    rgba(0, 85, 254, 0.45);

  /* ─────────────────── Text ─────────────────── */
  --text:            #ffffff;
  --text-2:          rgba(255, 255, 255, 0.66);
  /* Fliesstext-Token. An den Glyphenpixeln gemessen sind Alpha 0,4902 noetig, damit auch
     der blaue Radial-Peak von .glass-feature 4,5:1 haelt; 0,50 gibt Reserve (min 4,62:1).
     Fuer alles, was gelesen werden muss. */
  --text-legible:    rgba(255, 255, 255, 0.50);
  /* Dekor-Token. Nicht AA-tauglich — nur fuer nicht-textuelle Zeichen (Listenstriche). */
  --text-3:          rgba(255, 255, 255, 0.42);
  --text-faint:      rgba(255, 255, 255, 0.22);
  --text-on-brand:   #ffffff;
  --offwhite:        #EFEEEC;

  /* ─────────────────── Status (used sparingly) ─────────────────── */
  --success:         #1FCB7A;
  --warning:         #F5A623;
  --danger:          #FF4D6D;

  /* ─────────────────── Fokus ─────────────────── */
  /* Der Browser-Standardring ist kobaltblau. Auf .btn-gradient, der bei exakt diesem
     Blau (#0055FE) beginnt, betraegt sein Kontrast zur Buttonflaeche 1:1. Weiss haelt
     ueberall: min 5,07:1 auf dem Lila-Ende des Gradienten, 21:1 auf der Seite. */
  --focus-ring:        #fff;
  --focus-ring-width:  2px;
  --focus-ring-offset: 3px;
}