/* =========================================================================
   Desenvolv Design System: Core tokens
   Extracted from phdev7/agencykit-ads (resources/css/app.css) + Figma
   Flat surfaces. No gradients in UI. No glows. Dark mode only.
   ========================================================================= */

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

  /* ===== Brand (lime is THE accent: single color system) ===== */
  --orizon-accent:         #c0ff00; /* primary / interactive */
  --orizon-accent-hover:   #d4ff57; /* hover */
  --orizon-accent-soft:    #e8ffa1; /* highlight, text on dark */
  --orizon-accent-ink:     #0d0d0d; /* text on top of lime */
  --orizon-accent-alpha-8: rgba(192, 255, 0, 0.08);
  --orizon-accent-alpha-18: rgba(192, 255, 0, 0.18);
  --orizon-accent-alpha-26: rgba(192, 255, 0, 0.26); /* ::selection */

  /* ===== Surfaces (dark) ===== */
  --bg:                    #0f0f0f; /* app background */
  --surface-soft:          #131313; /* sidebar inner */
  --surface:               #161616; /* panels, cards */
  --surface-elevated:      #1b1b1b; /* hovered card / elevated */
  --surface-hover:         #1c1c1c; /* hover state */
  --surface-input:         #161616; /* same as panel */

  /* ===== Lines / borders ===== */
  --line:                  #242424; /* subtle */
  --line-strong:           #2e2e2e; /* hover */
  --line-accent:           #323a20; /* active-green-hinted */
  --line-focus:            var(--orizon-accent);

  /* ===== Text ===== */
  --text:                  #f4f6ef; /* primary: slightly warm-green white */
  --text-soft:             #cfd4c3;
  --text-muted:            #8d9680;
  --text-muted-strong:     #a9b199;

  /* ===== Status (flat, no glow) ===== */
  --ok:                    #b6e24a;
  --warn:                  #e4c547;
  --danger:                #e97070;
  --ok-bg:                 rgba(182, 226, 74, 0.06);
  --warn-bg:               rgba(228, 197, 71, 0.06);
  --danger-bg:             rgba(233, 112, 112, 0.06);
  --ok-border:             rgba(182, 226, 74, 0.28);
  --warn-border:           rgba(228, 197, 71, 0.28);
  --danger-border:         rgba(233, 112, 112, 0.32);

  /* ===== Typography ===== */
  --font-sans:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: '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;
}

/* ---------- 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: #ffffff;
  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: #ffffff;
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: #ffffff;
  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; }