/* KTS design tokens — change brand colours, type or spacing here only. */

@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Light theme (default) ---- */
  color-scheme: light;
  --bg-0: #F7F9FC;
  --bg-1: #EEF2F8;
  --bg-2: #FFFFFF;
  --surface-1: #FFFFFF;
  --surface-2: #F1F5FA;
  --line: rgba(15, 23, 42, 0.10);
  --line-strong: rgba(15, 23, 42, 0.16);

  --text: #0B1220;
  --text-2: #3A4658;
  --text-3: #5B6778;
  --text-4: #7A8596;

  --accent: #2563EB;
  --accent-soft: #1D4ED8;      /* accent used as text */
  --accent-strong: #2563EB;
  --accent-rgb: 37, 99, 235;
  --energy: #059669;           /* energy / live / healthy system states only */
  --energy-rgb: 5, 150, 105;
  --wa: #1DA851;               /* WhatsApp brand green — WhatsApp buttons only */
  --wa-surface: #E9F9EF;
  --danger: #DC2626;
  --ok-text: #065F46;
  --err-text: #991B1B;

  --grad-text: linear-gradient(92deg, #0B1220 0%, #1D4ED8 55%, #2563EB 100%);

  /* surfaces */
  --glass: rgba(255, 255, 255, .72);
  --glass-hover: rgba(255, 255, 255, .95);
  --nav-bg: rgba(247, 249, 252, .82);
  --nav-bg-solid: rgba(247, 249, 252, .98);
  --card-a: rgba(255, 255, 255, .95);
  --card-b: rgba(248, 250, 253, .95);
  --input-bg: #FFFFFF;
  --hover-ink: rgba(15, 23, 42, .045);
  --grid-line: rgba(37, 99, 235, .07);
  --dot-grid: rgba(37, 99, 235, .16);
  --shadow: 0 30px 60px -30px rgba(15, 23, 42, .25);
  --hero-lead: #2B3647;
  --hero-img-filter: saturate(1) contrast(1);
  --hero-scrim:
    linear-gradient(90deg, rgba(247,249,252,.97) 0%, rgba(247,249,252,.9) 30%, rgba(247,249,252,.45) 55%, rgba(247,249,252,0) 75%),
    linear-gradient(180deg, rgba(247,249,252,.7) 0%, rgba(247,249,252,0) 20%, rgba(247,249,252,0) 78%, #F7F9FC 100%);
  --hero-scrim-m:
    linear-gradient(180deg, rgba(247,249,252,.55) 0%, rgba(247,249,252,.82) 40%, rgba(247,249,252,.95) 70%, #F7F9FC 100%);
  --closing-scrim:
    linear-gradient(180deg, #F7F9FC 0%, rgba(247,249,252,.82) 35%, rgba(247,249,252,.88) 70%, #F7F9FC 100%),
    radial-gradient(60% 60% at 50% 50%, rgba(37, 99, 235, .10), transparent 70%);

  /* BMS diagram */
  --dg-wire: rgba(37, 99, 235, .28);
  --dg-node: #FFFFFF;
  --dg-node-stroke: rgba(15, 23, 42, .14);
  --dg-text: #0B1220;
  --dg-sub: #5B6778;
  --dg-icon: #2563EB;
  --dg-core: #2563EB;
  --dg-core-stroke: rgba(37, 99, 235, .9);
  --dg-core-sub: rgba(255, 255, 255, .85);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-0: #070A10;
  --bg-1: #0A0E16;
  --bg-2: #0D121C;
  --surface-1: #101827;
  --surface-2: #131D2B;
  --line: rgba(173, 184, 200, 0.12);
  --line-strong: rgba(173, 184, 200, 0.22);

  --text: #F7F8FA;
  --text-2: #ADB8C8;
  --text-3: #8490A2;
  --text-4: #6C7888;

  --accent: #4D8DFF;
  --accent-soft: #8DB4FF;
  --accent-strong: #2563EB;
  --accent-rgb: 77, 141, 255;
  --energy: #2EE6A6;
  --energy-rgb: 46, 230, 166;
  --wa: #25D366;
  --wa-surface: #0E1A14;
  --danger: #FF9A9C;
  --ok-text: #BFF7E2;
  --err-text: #FFD0D1;

  --grad-text: linear-gradient(92deg, #F7F8FA 0%, #A9C6FF 45%, #4D8DFF 100%);

  --glass: rgba(13, 18, 28, .6);
  --glass-hover: rgba(19, 29, 43, .75);
  --nav-bg: rgba(10, 14, 22, .78);
  --nav-bg-solid: rgba(10, 14, 22, .96);
  --card-a: rgba(19, 29, 43, .7);
  --card-b: rgba(13, 18, 28, .7);
  --input-bg: rgba(7, 10, 16, .6);
  --hover-ink: rgba(255, 255, 255, .04);
  --grid-line: rgba(141, 180, 255, .06);
  --dot-grid: rgba(141, 180, 255, .14);
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
  --hero-lead: #C3CCD9;
  --hero-img-filter: saturate(.85) contrast(1.05);
  --hero-scrim:
    linear-gradient(90deg, rgba(7,10,16,.94) 0%, rgba(7,10,16,.82) 30%, rgba(7,10,16,.4) 55%, rgba(7,10,16,.05) 78%),
    linear-gradient(180deg, rgba(7,10,16,.7) 0%, rgba(7,10,16,0) 20%, rgba(7,10,16,0) 78%, #070A10 100%);
  --hero-scrim-m:
    linear-gradient(180deg, rgba(7,10,16,.5) 0%, rgba(7,10,16,.8) 40%, rgba(7,10,16,.95) 70%, #070A10 100%);
  --closing-scrim:
    linear-gradient(180deg, #070A10 0%, rgba(7,10,16,.7) 35%, rgba(7,10,16,.8) 70%, #070A10 100%),
    radial-gradient(60% 60% at 50% 50%, rgba(37, 99, 235, .22), transparent 70%);

  --dg-wire: rgba(141, 180, 255, .28);
  --dg-node: #101827;
  --dg-node-stroke: rgba(173, 184, 200, .22);
  --dg-text: #F7F8FA;
  --dg-sub: #8490A2;
  --dg-icon: #8DB4FF;
  --dg-core: #0F1B33;
  --dg-core-stroke: rgba(77, 141, 255, .6);
  --dg-core-sub: #8DB4FF;
}

:root {
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 80px; --s-10: 96px; --s-11: 128px; --s-12: 160px;

  --gutter: clamp(20px, 4vw, 40px);
  --maxw: 1240px;
  --section-y: clamp(88px, 11vw, 160px);
  --radius: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --nav-h: 72px;
}