/* ==========================================================================
   IPHOST — tokeni de culoare
   Ediția 1.0 · 2026
   Valorile de brand sunt extrase din fișierul vectorial oficial al logoului.
   Nicio culoare nu se scrie direct în componente — se folosesc doar variabilele.
   ========================================================================== */

:root {
  /* --- Culori de brand --------------------------------------------------- */
  --iph-blue:            #2969FF;  /* culoarea principală, din logo */
  --iph-blue-tint:       #EBF1FF;
  --iph-blue-light:      #5B8AFF;
  --iph-blue-deep:       #1E4FCC;  /* text dens pe alb — contrast 6,90:1 */
  --iph-blue-on-dark:    #7FAAFF;  /* varianta pentru fundal închis — 8,29:1 */

  --iph-amber:           #FFB801;  /* accent, din logo. Niciodată text pe alb */
  --iph-amber-light:     #FFCC4D;
  --iph-amber-deep:      #CC9300;
  --iph-amber-text:      #8C6400;  /* singura nuanță caldă admisă ca text — 5,33:1 */

  --iph-ink:             #0F0F11;

  /* --- Neutre ------------------------------------------------------------ */
  --iph-graphite:        #1C1F24;
  --iph-slate:           #4A5057;
  --iph-mist:            #A9B0B8;
  --iph-cloud:           #E8EBEE;
  --iph-paper:           #F7F8F9;
  --iph-white:           #FFFFFF;

  /* --- Culori funcționale (temă deschisă) -------------------------------- */
  --iph-success:         #17A34A;
  --iph-info:            #2969FF;
  --iph-warning:         #E8880A;
  --iph-danger:          #DC2626;

  --iph-success-bg:      #E9F7EF;
  --iph-info-bg:         #E9EFFF;
  --iph-warning-bg:      #FEF3E2;
  --iph-danger-bg:       #FDECEC;

  /* ======================================================================
     Tokeni semantici — TEMA DESCHISĂ (implicită)
     Componentele folosesc EXCLUSIV tokenii de mai jos, nu culorile brute.
     ====================================================================== */
  --surface-0:           var(--iph-white);
  --surface-1:           var(--iph-paper);
  --surface-2:           #EFF1F3;
  --surface-3:           #E4E7EA;

  --border:              var(--iph-cloud);
  --border-strong:       #C6CCD2;

  --text:                var(--iph-ink);
  --text-muted:          var(--iph-slate);
  --text-subtle:         #7B838B;
  --text-disabled:       var(--iph-mist);
  --text-on-accent:      var(--iph-white);

  --accent:              var(--iph-blue);
  --accent-hover:        var(--iph-blue-light);
  --accent-active:       var(--iph-blue-deep);
  --accent-text:         var(--iph-blue-deep);
  --accent-subtle-bg:    var(--iph-blue-tint);

  --highlight:           var(--iph-amber);       /* suprafață, nu text */
  --highlight-text:      var(--iph-amber-text);

  --focus:               var(--iph-blue);
  --focus-width:         2px;
  --focus-offset:        2px;

  /* --- Rază și spațiere -------------------------------------------------- */
  --radius-sm:           4px;   /* câmpuri, butoane */
  --radius-md:           8px;   /* carduri */
  --radius-lg:           16px;  /* blocuri de secțiune */

  --space-1:  4px;   --space-2:  8px;   --space-3: 16px;  --space-4: 24px;
  --space-5: 32px;   --space-6: 48px;   --space-7: 64px;  --space-8: 96px;

  /* --- Tipografie -------------------------------------------------------- */
  --font-sans: "Onest", "Inter", Arial, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", monospace;
}

/* ==========================================================================
   TEMA ÎNTUNECATĂ
   Obligatorie pentru panouri de monitorizare. Elevația se exprimă prin
   suprafață mai deschisă, nu prin umbră.
   ========================================================================== */
[data-theme="dark"] {
  --surface-0:           var(--iph-ink);
  --surface-1:           #171A1E;
  --surface-2:           var(--iph-graphite);
  --surface-3:           #252A30;

  --border:              #2C3138;
  --border-strong:       #3A4048;

  --text:                #EDEFF2;
  --text-muted:          var(--iph-mist);
  --text-subtle:         #7B838B;
  --text-disabled:       #565D65;
  --text-on-accent:      var(--iph-ink);

  --accent:              var(--iph-blue-on-dark);
  --accent-hover:        #9BBEFF;
  --accent-active:       var(--iph-blue-light);
  --accent-text:         var(--iph-blue-on-dark);
  --accent-subtle-bg:    #16233F;

  --highlight:           var(--iph-amber);
  --highlight-text:      var(--iph-amber);

  --focus:               #7FAAFF;

  /* Stările se luminează — variantele saturate sunt ilizibile pe negru */
  --iph-success:         #3DD277;
  --iph-info:            #7FAAFF;
  --iph-warning:         #F5A524;
  --iph-danger:          #F26D6D;

  --iph-success-bg:      #102A1B;
  --iph-info-bg:         #16233F;
  --iph-warning-bg:      #2E2109;
  --iph-danger-bg:       #331414;
}

/* ==========================================================================
   Reguli obligatorii
   ========================================================================== */

/* Inelul de focalizare nu se elimină niciodată. */
:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* Cifrele se aliniază vertical în tabele, prețuri și specificații. */
.iph-num, td.iph-num, .iph-table td:where(.num) {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Chihlimbarul este suprafață, nu literă: pe el, textul e întotdeauna Ink. */
.iph-highlight {
  background: var(--highlight);
  color: var(--iph-ink);
}