/* =========================================================================
   Diex Design System: Core tokens
   Light-first interface with a dark mode toggle.
   ========================================================================= */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ---------- Root tokens ---------- */
:root {
  color-scheme: light;

  /* ===== Brand ===== */
  --diex-primary:          #0E0929;
  --diex-secondary:        #92ACFF;
  --diex-accent:           #5F7DFF;
  --diex-accent-strong:    #3D5BFF;
  --diex-light:            #FDFCFF;
  --diex-dark:             #02000F;

  --orizon-accent:         var(--diex-accent);
  --orizon-accent-hover:   #2F4DFF;
  --orizon-accent-soft:    #6F8AFF;
  --orizon-accent-ink:     #FDFCFF;
  --orizon-accent-alpha-8: rgba(95, 125, 255, 0.08);
  --orizon-accent-alpha-18: rgba(95, 125, 255, 0.18);
  --orizon-accent-alpha-26: rgba(95, 125, 255, 0.26);

  /* ===== Surfaces (light default) ===== */
  --bg:                    #FDFCFF;
  --surface-soft:          #F2F5FF;
  --surface:               #FFFFFF;
  --surface-elevated:      #EEF2FF;
  --surface-hover:         #E7ECFF;
  --surface-input:         #FFFFFF;
  --panel:                 var(--surface);

  /* ===== Lines / borders ===== */
  --line:                  #DCE3FF;
  --line-strong:           #B9C8FF;
  --line-accent:           #92ACFF;
  --line-focus:            var(--orizon-accent);

  /* ===== Text ===== */
  --text:                  #0E0929;
  --text-soft:             #302B4D;
  --text-muted:            #716D88;
  --text-muted-strong:     #504B68;
  --heading:               #0E0929;

  /* ===== Status (flat, no glow) ===== */
  --ok:                    #18A058;
  --warn:                  #B7791F;
  --danger:                #e97070;
  --ok-bg:                 rgba(24, 160, 88, 0.08);
  --warn-bg:               rgba(183, 121, 31, 0.08);
  --danger-bg:             rgba(233, 112, 112, 0.06);
  --ok-border:             rgba(24, 160, 88, 0.28);
  --warn-border:           rgba(183, 121, 31, 0.28);
  --danger-border:         rgba(233, 112, 112, 0.32);

  /* ===== Typography ===== */
  --font-sans:    'Degular', 'Degular Text', 'Degular Display', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Degular', 'Degular Display', 'Degular Text', 'Poppins', sans-serif;
  --font-mono:    'Poppins', sans-serif; /* product uses sans everywhere */

  /* Scale (px) */
  --fs-eyebrow: 10px;
  --fs-caption: 11px;
  --fs-meta:    12.5px;
  --fs-body:    13px;
  --fs-body-lg: 14px;
  --fs-h3:      15px;
  --fs-h2:      17.6px;   /* 1.1rem */
  --fs-h1:      22.4px;   /* 1.4rem */
  --fs-h1-lg:   24px;     /* 1.5rem */

  --ls-tight:  -0.02em;
  --ls-body:   -0.005em;
  --ls-label:   0.14em;
  --ls-eyebrow: 0.22em;

  --lh-tight:  1.2;
  --lh-body:   1.5;

  /* ===== Radii (flatter than typical) ===== */
  --radius-container: 14px; /* main panels */
  --radius-card:      10px; /* sub cards */
  --radius-menu:       8px; /* nav items */
  --radius-button:     8px;
  --radius-input:      8px;
  --radius-check:      4px;
  --radius-pill:      999px;

  /* ===== Spacing / layout metrics ===== */
  --sidebar-w:           232px;
  --sidebar-w-collapsed: 72px;
  --topbar-h:            58px;
  --subheader-h:         52px;
  --content-max:         1400px;
  --gutter:              28px;
  --rhythm:              20px;
  --rhythm-lg:           28px;

  /* ===== Shadows (disabled: no glows) ===== */
  --shadow-soft: 0 0 0 rgba(0, 0, 0, 0);
  --shadow-hard: 0 0 0 rgba(0, 0, 0, 0);

  /* ===== Motion ===== */
  --ease:    cubic-bezier(0.2, 0, 0, 1); /* ease-out */
  --dur-xs:  120ms;
  --dur-sm:  160ms;
  --dur-md:  180ms;
  --dur-lg:  220ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --orizon-accent:         #92ACFF;
  --orizon-accent-hover:   #B0C2FF;
  --orizon-accent-soft:    #CAD6FF;
  --orizon-accent-ink:     #02000F;
  --orizon-accent-alpha-8: rgba(146, 172, 255, 0.08);
  --orizon-accent-alpha-18: rgba(146, 172, 255, 0.18);
  --orizon-accent-alpha-26: rgba(146, 172, 255, 0.26);

  --bg:                    #02000F;
  --surface-soft:          #08051D;
  --surface:               #0E0929;
  --surface-elevated:      #15103A;
  --surface-hover:         #1D1748;
  --surface-input:         #0B071F;
  --panel:                 var(--surface);

  --line:                  rgba(146, 172, 255, 0.18);
  --line-strong:           rgba(146, 172, 255, 0.38);
  --line-accent:           rgba(146, 172, 255, 0.52);
  --line-focus:            var(--orizon-accent);

  --text:                  #FDFCFF;
  --text-soft:             #E8ECFF;
  --text-muted:            #AEB9E8;
  --text-muted-strong:     #CBD4FF;
  --heading:               #FDFCFF;
}

/* ---------- Semantic base ---------- */

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

*,
*::before,
*::after { box-sizing: border-box; }

::selection {
  background: var(--orizon-accent-alpha-26);
  color: var(--orizon-accent-ink);
}

/* ---------- Semantic type classes ---------- */

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-muted);
}

.label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--text-muted);
}

h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--heading);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--heading);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--heading);
  margin: 0;
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}

.meta {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: 1.45;
}

.caption {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-sm) var(--ease);
}
a:hover { color: var(--orizon-accent-soft); }

/* ---------- Keyframes (product uses only these three) ---------- */

@keyframes orizon-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes orizon-fade-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes orizon-fade-in-sm {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Scrollbars ---------- */

::-webkit-scrollbar         { width: 8px; height: 8px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   {
  background: var(--line-strong);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #3d3d3d; }