/* LILLOX Premium Product Design V2 — machine-aligned CSS tokens */
:root,
:root[data-theme="dark"] {
  /* Jobb 644 (Mikael): mjukare mörkt tema enligt Material Design/Apple - mörkgrå bas i stället för nästan svart,
     ljusare ytor för djup, ljusgrå text i stället för rent vit, dämpade signalfärger. Tidigare: canvas #060A10, text #F5F8FC. */
  --v2-canvas:#16191F;
  --v2-shell:#1A1E25;
  --v2-surface-1:#20242C;
  --v2-surface-2:#252A33;
  --v2-surface-3:#2B313B;
  --v2-surface-hover:#313844;
  --v2-border:#363E4B;
  --v2-border-strong:#4A5464;
  --v2-text:#E3E6EA;
  --v2-text-2:#D2D7DE; /* Jobb 667: mörkare/ljusare grått för läsbarhet */
  --v2-text-3:#AEB6C2;
  --v2-accent:#4CBEF0;
  --v2-accent-strong:#2A9FDB;
  --v2-accent-soft:rgba(76,190,240,.14);
  --v2-success:#4DBE7A;
  --v2-warning:#E6B04F;
  --v2-risk:#EE914E;
  --v2-critical:#EE6B6B;
  --v2-ai:#A38BF5;
  --v2-focus:#6CCBF2;

  --v2-space-1:4px;
  --v2-space-2:8px;
  --v2-space-3:12px;
  --v2-space-4:16px;
  --v2-space-5:20px;
  --v2-space-6:24px;
  --v2-space-7:32px;
  --v2-space-8:40px;
  --v2-space-9:48px;

  --v2-radius-sm:8px;
  --v2-radius-md:10px;
  --v2-radius-lg:12px;
  --v2-radius-xl:16px;
  --v2-radius-2xl:20px;
  --v2-radius-pill:999px;

  --v2-font-display:var(--font-display,'Outfit',system-ui,sans-serif);
  --v2-font-body:var(--font-body,'Inter','Work Sans',system-ui,sans-serif); /* Jobb 68 */
  --v2-font-mono:var(--font-mono,'IBM Plex Mono',ui-monospace,monospace);

  --v2-sidebar:268px;
  --v2-sidebar-collapsed:76px;
  --v2-topbar:64px;
  --v2-content-max:1600px;
  --v2-touch:44px;
  --v2-row:44px;
  --v2-row-compact:36px;

  --v2-motion-fast:100ms;
  --v2-motion:160ms;
  --v2-motion-slow:220ms;
  --v2-ease:cubic-bezier(.2,.8,.2,1);

  --v2-shadow-panel:0 18px 60px rgba(0,0,0,.22);
  --v2-shadow-overlay:0 28px 80px rgba(0,0,0,.48);
  --v2-shadow-focus:0 0 0 3px rgba(17,184,255,.22);

  /* ============ LILLOX MOONLIGHT / Moonlit Reflection Layer ============
     Lockat designprincip (2026-08-23). Manljus mot mork glas/metall -
     riktat ljus som fangas av KANTER, aldrig glod som stralar fran
     YTOR. Aldrig box-shadow: 0 0 Npx <accentfarg> runt ett helt
     element (det ar neon) - alltid en tunn, riktad gradient langs en
     kant, plus ofargade, lagrade skuggor for djup. Denna sektion ar
     den enda kallan for tekniken - sidor laggar ALDRIG till egen
     glod/reflektion-CSS lokalt. */
  --v2-sheen-1:rgba(255,255,255,.07);
  --v2-sheen-2:rgba(255,255,255,.025);
  /* Kall, silvrig - INTE ren vit (#FFF later platt/skarmljus, inte
     reflekterat manljus). Fangar ljuset i ovre vanstra hornet av en kant. */
  --v2-edge-light:rgba(214,227,235,.20);
  /* Viskningen av markets egen petrol (#00B4C8-familjen) i kantens
     svans - som om en avlagsen ljuskalla reflekteras, inte malad dit. */
  --v2-edge-reflection:rgba(0,180,200,.09);
  --v2-depth-contact:rgba(0,0,0,.35);
  --v2-depth-ambient:rgba(0,0,0,.50);
  --v2-glass-tint:rgba(15,25,35,.55);

  /* Brand-glow (2026-08-23, LILLOX First Experience): skild fran
     --v2-accent (funktionell UI, #11B8FF) med avsikt. Detta ar
     logotyppaketets EGEN, officiella cyan (#00B4C8) - anvands ENDAST
     dar nagot genuint AR varumarket sjalvt som ljuskalla (symbolen,
     en framtida "om LILLOX"-yta), aldrig for vanliga knappar/lankar/
     fokusringar. Fortfarande Moonlight-disciplinerat: bred, mjuk,
     avmattad - ingen tajt neon-halo. */
  --v2-brand-core:#7DE4EE;
  --v2-brand-glow:rgba(0,180,200,.16);
  --v2-brand-glow-soft:rgba(0,180,200,.06);
}
:root[data-theme="light"] {
  --v2-canvas:#E9F1FA;
  --v2-shell:#FFFFFF;
  --v2-surface-1:#FFFFFF;
  --v2-surface-2:#F3F8FE;
  --v2-surface-3:#E4EEF9;
  --v2-surface-hover:#DDEBF9;
  --v2-border:#C9DAEC;
  --v2-border-strong:#A9C1DA;
  --v2-text:#0B1520;
  --v2-text-2:#22354B;
  --v2-text-3:#3F5268;
  --v2-accent:#0A72D1;
  --v2-accent-strong:#085CAB;
  --v2-accent-soft:rgba(10,114,209,.13);
  --v2-success:#23884B;
  --v2-warning:#A86B00;
  --v2-risk:#C55711;
  --v2-critical:#C63C3C;
  --v2-ai:#7256D9;
  --v2-focus:#007FD4;
  --v2-shadow-panel:0 12px 30px -12px rgba(14,58,112,.22);
  --v2-shadow-overlay:0 28px 80px rgba(22,42,64,.18);
  /* Jobb 637: ljust tema med mer färg och kontrast - text-3 läsbar på liten skärm */
}
/* Jobb 853: i ljust lage visas logotypen for ljus bakgrund */
:root[data-theme="light"] img[src*="lillox-logo-on-dark"] { content: url('/assets/brand/lillox-logo-on-light.svg'); }
:root[data-theme="light"] img[src*="lillox-wordmark-on-dark"] { content: url('/assets/brand/lillox-wordmark-on-light.svg'); } /* Jobb 671 */
/* Jobb 854: de gamla variablerna (tokens.css) foljer designsystemet och temat pa sidor som laddar tokens-v2.css. */
:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --white: var(--v2-surface-1); --bg-page: var(--v2-canvas); --surface-2: var(--v2-surface-2); --gray-tint: var(--v2-surface-3);
  --border: var(--v2-border); --border-soft: var(--v2-border);
  --ink: var(--v2-text); --ink-soft: var(--v2-text); --text-2: var(--v2-text-2); --text-3: var(--v2-text-3); --text-4: var(--v2-text-3); --slate: var(--v2-text-2); --gray: var(--v2-text-3);
  --blue: var(--v2-accent-strong); --blue-deep: var(--v2-accent-strong); --blue-text: var(--v2-accent); --blue-tint: var(--v2-accent-soft);
  --green: var(--v2-success); --green-text: var(--v2-success); --green-tint: color-mix(in srgb, var(--v2-success) 16%, transparent);
  --amber: var(--v2-warning); --amber-text: var(--v2-warning); --amber-tint: color-mix(in srgb, var(--v2-warning) 16%, transparent);
  --orange: var(--v2-risk); --orange-text: var(--v2-risk); --orange-tint: color-mix(in srgb, var(--v2-risk) 16%, transparent);
  --red: var(--v2-critical); --red-text: var(--v2-critical); --red-tint: color-mix(in srgb, var(--v2-critical) 16%, transparent);
  --purple: var(--v2-ai); --purple-text: var(--v2-ai); --purple-tint: color-mix(in srgb, var(--v2-ai) 16%, transparent);
}
/* Jobb 854: webblasarens egna kontroller (datum, rullister) och falt utan egen stil foljer temat. :where() ger
   ingen specificitet - sidor som stylar sina falt sjalva behaller sin stil. */
:root, :root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
:where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button], [type=image]), select, textarea) {
  background-color: var(--v2-surface-2); color: var(--v2-text); border: 1px solid var(--v2-border); border-radius: 8px; padding: 6px 8px;
}
:where(input, select, textarea)::placeholder { color: var(--v2-text-3); }