/* ============================================================
   SIGNAL DESIGN SYSTEM · Singularika · tokens v2.0
   Палітра лого (індиго → циан) + Comfortaa/Nunito
   ============================================================ */

:root {
  /* ---------- COLOR · LOGO SCALE (з брендбуку) ---------- */
  --sg-logo-1: #2D2A5B;  /* темний індиго — основний темний */
  --sg-logo-2: #2E2B60;
  --sg-logo-3: #2B4175;
  --sg-logo-4: #245B8B;
  --sg-logo-5: #1F719D;
  --sg-logo-6: #198DB4;
  --sg-logo-7: #169ABE;  /* найсвітліший акцент — циан */
  --sg-electric-blue: #1B44FF;

  /* ---------- COLOR · CORE BRAND ---------- */
  --sg-indigo:     var(--sg-logo-1);
  --sg-cyan:       var(--sg-logo-7);
  --sg-accent:     #FF7A30;   /* помаранчевий акцент — дія, CTA */
  --sg-accent-ink: #2A3005;
  --sg-honey:      #E6A817;   /* теплий другорядний */
  --sg-cloud:      #FAFBFD;   /* база — м'який холодний білий */

  /* фірмовий градієнт = градієнт лого */
  --sg-grad: linear-gradient(100deg, var(--sg-logo-1) 0%, var(--sg-logo-4) 55%, var(--sg-logo-7) 100%);
  --sg-grad-soft: linear-gradient(100deg, rgba(45,42,91,.08), rgba(22,154,190,.10));

  /* ---------- COLOR · COOL NEUTRALS (індиговий підтон) ---------- */
  --sg-n-50:  #F7F8FB;
  --sg-n-100: #EEF1F7;   /* mist — фон секцій */
  --sg-n-200: #DFE4EE;
  --sg-n-300: #C4CBDC;
  --sg-n-400: #98A0B8;
  --sg-n-500: #6E7590;
  --sg-n-600: #4E546E;
  --sg-n-700: #383D55;
  --sg-n-800: #262A40;
  --sg-n-900: #16182A;

  /* ---------- COLOR · SEMANTIC ---------- */
  --sg-success:    #2E7D4F;  --sg-success-bg: #E4F2E9;
  --sg-warning:    #B7791F;  --sg-warning-bg: #FBF0DA;
  --sg-danger:     #C0392B;  --sg-danger-bg:  #FBE7E4;
  --sg-info:       var(--sg-logo-5);  --sg-info-bg: #E2F0F7;

  /* ---------- COLOR · ROLES ---------- */
  --sg-bg:            var(--sg-cloud);
  --sg-bg-raised:     #FFFFFF;
  --sg-bg-sunken:     var(--sg-n-100);
  --sg-bg-inverse:    var(--sg-indigo);
  --sg-text:          #1D1B3A;          /* індиго-чорнило */
  --sg-text-muted:    var(--sg-n-600);
  --sg-text-subtle:   var(--sg-n-500);
  --sg-text-inverse:  #F4F6FB;
  --sg-border:        var(--sg-n-200);
  --sg-border-strong: var(--sg-n-300);
  --sg-focus:         var(--sg-logo-6);

  /* ---------- TYPOGRAPHY ---------- */
  --sg-font-display: var(--font-signal-display), "Comfortaa", system-ui, sans-serif;  /* = стиль лого */
  --sg-font-body:    var(--font-signal-body), "Nunito", system-ui, sans-serif;      /* округлий, теплий */
  --sg-font-mono:    var(--font-signal-mono), "JetBrains Mono", ui-monospace, monospace;

  --sg-text-xs:   0.75rem;
  --sg-text-sm:   0.875rem;
  --sg-text-base: 1rem;
  --sg-text-lg:   1.25rem;
  --sg-text-xl:   1.5rem;
  --sg-text-2xl:  1.875rem;
  --sg-text-3xl:  2.35rem;
  --sg-text-4xl:  2.9rem;
  --sg-text-5xl:  3.6rem;
  /* Comfortaa широкий — шкала трохи стриманіша за v1 */

  --sg-leading-tight: 1.15;
  --sg-leading-normal: 1.6;
  --sg-tracking-wide: 0.08em;

  /* ---------- SPACING · крок 4px ---------- */
  --sg-s-1:.25rem; --sg-s-2:.5rem; --sg-s-3:.75rem; --sg-s-4:1rem;
  --sg-s-5:1.5rem; --sg-s-6:2rem; --sg-s-7:3rem; --sg-s-8:4rem;
  --sg-s-9:6rem; --sg-s-10:8rem;

  /* ---------- RADIUS · округла система ---------- */
  --sg-r-sm:   10px;
  --sg-r-md:   14px;
  --sg-r-lg:   20px;
  --sg-r-xl:   28px;
  --sg-r-full: 999px;   /* кнопки — пігулки */

  /* ---------- SHADOWS · індигові, м'які ---------- */
  --sg-shadow-sm: 0 1px 2px rgba(45,42,91,.06);
  --sg-shadow-md: 0 4px 14px rgba(45,42,91,.10), 0 1px 3px rgba(45,42,91,.05);
  --sg-shadow-lg: 0 14px 36px rgba(45,42,91,.14), 0 3px 10px rgba(45,42,91,.07);
  --sg-shadow-glow: 0 0 0 4px rgba(25,141,180,.22);
  --sg-shadow-accent: 0 6px 18px rgba(255,122,48,.38);

  /* ---------- MOTION ---------- */
  --sg-ease: cubic-bezier(.2,.6,.2,1);
  --sg-ease-spring: cubic-bezier(.34,1.56,.64,1); /* пружинка для дрібних елементів */
  --sg-dur-fast:120ms; --sg-dur-base:200ms; --sg-dur-slow:360ms;

  /* ---------- LAYOUT ---------- */
  --sg-container:1200px; --sg-container-sm:760px; --sg-gutter:1.5rem;
  --sg-z-nav:100; --sg-z-dropdown:200; --sg-z-modal:300; --sg-z-toast:400;

  /* ---------- LEGACY ALIASES · Signal remains the source ---------- */
  --blue: var(--sg-logo-4);
  --deep-blue: var(--sg-logo-3);
  --cyan: var(--sg-logo-6);
  --bright-cyan: var(--sg-logo-7);
  --bg: var(--sg-bg);
  --surface: var(--sg-bg-raised);
  --border: var(--sg-border);
  --text-primary: var(--sg-text);
  --text-secondary: var(--sg-text-muted);
  --logo-blue: var(--sg-logo-4);
  --logo-cyan-blue: var(--sg-logo-5);
  --font-display: var(--sg-font-display);
  --font-body: var(--sg-font-body);
  --font-utility: var(--sg-font-mono);
  --shadow-card: var(--sg-shadow-md);
  --background: var(--sg-bg);
  --foreground: var(--sg-text);

  --ads-blue: var(--sg-logo-4);
  --ads-blue-bold: var(--sg-logo-3);
  --ads-blue-bg: var(--sg-info-bg);
  --ads-navy: var(--sg-text);
  --ads-text: var(--sg-text);
  --ads-subtle: var(--sg-text-muted);
  --ads-muted: var(--sg-text-subtle);
  --ads-bg: var(--sg-n-50);
  --ads-surface: var(--sg-bg-raised);
  --ads-surface-raised: var(--sg-bg-raised);
  --ads-border: var(--sg-border);
  --ads-border-bold: var(--sg-border-strong);
  --ads-green-bg: var(--sg-success-bg);
  --ads-green: var(--sg-success);
  --ads-yellow-bg: var(--sg-warning-bg);
  --ads-yellow: var(--sg-warning);
  --ads-purple-bg: color-mix(in srgb, var(--sg-logo-2) 10%, var(--sg-bg-raised));
  --ads-purple: var(--sg-logo-2);

  --carbon-blue: var(--sg-logo-6);
  --carbon-blue-hover: var(--sg-logo-5);
  --carbon-blue-active: var(--sg-logo-3);
  --carbon-black: var(--sg-n-900);
  --carbon-gray-100: var(--sg-n-800);
  --carbon-gray-90: var(--sg-n-700);
  --carbon-gray-80: var(--sg-n-600);
  --carbon-gray-70: var(--sg-n-500);
  --carbon-gray-20: var(--sg-n-200);
  --carbon-gray-10: var(--sg-n-50);
  --carbon-white: var(--sg-bg-raised);
  --carbon-cyan: var(--sg-logo-7);
  --carbon-green: var(--sg-success);

  --enterprise-bg: color-mix(in srgb, var(--sg-cloud) 92%, var(--sg-honey));
  --enterprise-bg-soft: color-mix(in srgb, var(--sg-cloud) 96%, var(--sg-honey));
  --enterprise-ink: var(--sg-text);
  --enterprise-muted: var(--sg-text-muted);
  --enterprise-subtle: var(--sg-text-subtle);
  --enterprise-line: color-mix(in srgb, var(--sg-text) 12%, transparent);
  --enterprise-line-strong: color-mix(in srgb, var(--sg-text) 20%, transparent);
  --enterprise-surface: color-mix(in srgb, var(--sg-bg-raised) 78%, transparent);
  --enterprise-surface-solid: color-mix(in srgb, var(--sg-bg-raised) 96%, var(--sg-honey));
  --enterprise-blue: var(--sg-logo-4);
  --enterprise-blue-strong: var(--sg-logo-3);
  --enterprise-blue-soft: var(--sg-info-bg);
  --enterprise-cyan: var(--sg-logo-6);
  --enterprise-shadow: var(--sg-shadow-lg);
}

/* ============================================================
   DARK THEME · data-theme="dark" — глибокий індиго-нічний
   ============================================================ */
[data-theme="dark"] {
  --sg-bg:            #14122B;
  --sg-bg-raised:     #1E1C3D;
  --sg-bg-sunken:     #0E0D20;
  --sg-bg-inverse:    var(--sg-cloud);
  --sg-text:          #EDEFF7;
  --sg-text-muted:    #A5ABC4;
  --sg-text-subtle:   #7C82A0;
  --sg-text-inverse:  #1D1B3A;
  --sg-border:        #2C2A52;
  --sg-border-strong: #3B3968;
  --sg-success-bg:#15301F; --sg-warning-bg:#33260D; --sg-danger-bg:#331410; --sg-info-bg:#0E2735;
  --sg-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --sg-shadow-md:0 4px 14px rgba(0,0,0,.5);
  --sg-shadow-lg:0 14px 36px rgba(0,0,0,.6);
}

/* ============================================================
   SECTION SKINS · cloud → mist → indigo → field
   ============================================================ */
.sec-cloud { background: var(--sg-bg); color: var(--sg-text); }
.sec-mist  { background: var(--sg-n-100); color: var(--sg-text); }

.sec-indigo {
  background:
    radial-gradient(1000px 460px at 88% -10%, rgba(22,154,190,.28), transparent 60%),
    radial-gradient(700px 400px at -5% 105%, rgba(255,122,48,.10), transparent 55%),
    var(--sg-indigo);
  color: #F4F6FB;
}

.sec-field {
  background-color: var(--sg-bg);
  background-image: radial-gradient(var(--sg-n-300) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
}

/* Aura — світла секція з м'якими кольоровими плямами (mesh) */
.sec-aura { position: relative; isolation: isolate; background: var(--sg-bg); overflow: hidden; }
.sec-aura::before {
  content:""; position:absolute; inset:-20%; z-index:-1; filter: blur(70px); opacity:.5;
  background:
    radial-gradient(420px 320px at 20% 30%, rgba(22,154,190,.30), transparent 70%),
    radial-gradient(460px 340px at 80% 20%, rgba(45,42,91,.20), transparent 70%),
    radial-gradient(380px 300px at 65% 85%, rgba(255,122,48,.18), transparent 70%);
}

/* Зерно: .grain поверх будь-якої секції */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content:""; position:absolute; inset:0; z-index:-1; opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   SIGNATURE ELEMENTS
   ============================================================ */

/* Мітка: моно + градієнтна пігулка лого */
.sg-label {
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sg-font-mono); font-size:var(--sg-text-xs);
  letter-spacing:var(--sg-tracking-wide); text-transform:uppercase;
  color:var(--sg-electric-blue);
}
.sg-label::before {
  content:""; width:1.6em; height:.55em;
  background:var(--sg-electric-blue); border-radius:var(--sg-r-full);
}
.sec-indigo .sg-label { color:var(--sg-electric-blue); }
.sec-indigo .sg-label::before { background:var(--sg-electric-blue); }

/* Градієнтний текст лого: <em class="sg-grad-text">слово</em> */
.sg-grad-text {
  font-style:normal;
  background:var(--sg-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sec-indigo .sg-grad-text {
  background:linear-gradient(95deg,#5ED0EE, var(--sg-accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Шартрезний маркер: <em class="sg-mark"> — для CTA-заголовків */
.sg-mark {
  font-style:normal;
  background:linear-gradient(transparent 58%, var(--sg-accent) 58%, var(--sg-accent) 92%, transparent 92%);
  padding:0 .08em;
}

/* Градієнтний роздільник */
.sg-divider { height:3px; border:none; border-radius:var(--sg-r-full); background:var(--sg-grad); opacity:.85; }

/* ============================================================
   FOCUS + MOTION SAFETY
   ============================================================ */
:focus-visible { outline:2px solid var(--sg-focus); outline-offset:2px; border-radius:var(--sg-r-sm); }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
}