/* ============================================================
   PLUR Solutions — Color tokens
   Derived from the brand logo (four indigo dots) and the
   product's dark indigo theme (#0c0c1d).
   ============================================================ */

:root {
  /* ---- Brand indigo scale ----------------------------------
     400–700 are sampled directly from the four logo dots.     */
  --indigo-50:  #eef0fb;
  --indigo-100: #dde2f7;
  --indigo-200: #bcc5ed;
  --indigo-300: #9aa6e2;
  --indigo-400: #7386d5; /* dot 1 — lightest periwinkle */
  --indigo-500: #5b6fbd; /* dot 2 */
  --indigo-600: #465bb0; /* dot 3 */
  --indigo-700: #2f4499; /* dot 4 — deep royal indigo */
  --indigo-800: #243573;
  --indigo-900: #161f47;
  --indigo-950: #0c0c1d; /* product theme color / page base */

  /* ---- Charcoal (wordmark) & neutral ink -------------------- */
  --ink-900: #161620;
  --ink-800: #20202e;
  --ink-700: #2a2a3a;

  /* ---- Dark-theme surface ladder (default brand context) ---- */
  --bg-base:     #0a0a17; /* deepest — page background */
  --bg-raised:   #0f0f22; /* large panels / sections */
  --surface-1:   #15152c; /* default card */
  --surface-2:   #1c1c38; /* nested / hover card */
  --surface-3:   #24244a; /* active / elevated */

  /* ---- Hairlines & borders --------------------------------- */
  --line-subtle:  rgba(255, 255, 255, 0.06);
  --line-default: rgba(255, 255, 255, 0.10);
  --line-strong:  rgba(255, 255, 255, 0.16);
  --line-accent:  rgba(115, 134, 213, 0.45);

  /* ---- Text on dark ---------------------------------------- */
  --text-primary:   #f6f7fc;
  --text-secondary: #b6b9cc;
  --text-muted:     #7e8199;
  --text-faint:     #565a72;
  --text-on-accent: #ffffff;

  /* ---- Neutral scale (for light surfaces / slides) --------- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f7fb;
  --neutral-100: #eceef5;
  --neutral-200: #dce0ea;
  --neutral-300: #c2c7d6;
  --neutral-400: #969cb2;
  --neutral-500: #6c7188;
  --neutral-600: #4c5066;
  --neutral-700: #353950;
  --neutral-800: #20222f;
  --neutral-900: #12131c;

  /* ---- Semantic status ------------------------------------- */
  --success: #34c98a;
  --success-soft: rgba(52, 201, 138, 0.14);
  --warning: #f2b347;
  --warning-soft: rgba(242, 179, 71, 0.14);
  --danger:  #f0616d;
  --danger-soft: rgba(240, 97, 109, 0.14);
  --info:    var(--indigo-400);
  --info-soft: rgba(115, 134, 213, 0.14);

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */

  /* Brand accent */
  --accent:          var(--indigo-400);
  --accent-strong:   var(--indigo-600);
  --accent-deep:     var(--indigo-700);
  --accent-soft:     rgba(115, 134, 213, 0.12);
  --accent-soft-hover: rgba(115, 134, 213, 0.20);

  /* Page + surfaces */
  --color-bg:        var(--bg-base);
  --color-bg-raised: var(--bg-raised);
  --surface-card:    var(--surface-1);
  --surface-card-hover: var(--surface-2);
  --surface-sunken:  var(--bg-raised);

  /* Text */
  --text-heading: var(--text-primary);
  --text-body:    var(--text-secondary);
  --text-label:   var(--text-muted);

  /* Borders */
  --border-card:   var(--line-default);
  --border-input:  var(--line-strong);
  --border-hairline: var(--line-subtle);

  /* Brand gradients */
  --gradient-dots: linear-gradient(90deg, #7386d5 0%, #5b6fbd 34%, #465bb0 67%, #2f4499 100%); /* @kind color */
  --gradient-accent: linear-gradient(135deg, #7386d5 0%, #4a5cb3 100%); /* @kind color */
  --gradient-deep: linear-gradient(160deg, #161f47 0%, #0c0c1d 100%); /* @kind color */
  --gradient-glow: radial-gradient(60% 60% at 50% 0%, rgba(115,134,213,0.22) 0%, rgba(115,134,213,0) 70%); /* @kind color */
}
/* ============================================================
   PLUR Solutions — Typography tokens
   Display : Rubik       (rounded geometric grotesque — its
                          circular forms echo the dotted logo;
                          headings & hero, weights 600–900)
   Text    : Manrope     (clean premium workhorse, full Cyrillic)
   Mono    : JetBrains Mono (eyebrows, stat numbers, code, labels)
   Fonts are web-linked from Google Fonts (see styles.css import).
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "Rubik", "Manrope", system-ui, sans-serif;
  --font-text:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Weights ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* ---- Fluid display scale (hero / section headers) ---- */
  --display-2xl: clamp(2.75rem, 1.6rem + 5.8vw, 5.5rem); /* @kind other */
  --display-xl:  clamp(2.25rem, 1.4rem + 4.2vw, 4rem); /* @kind other */
  --display-lg:  clamp(1.9rem, 1.3rem + 3vw, 3rem); /* @kind other */
  --display-md:  clamp(1.6rem, 1.2rem + 2vw, 2.25rem); /* @kind other */

  /* ---- Static type ramp ---- */
  --text-3xl: 2rem; /* @kind font */
  --text-2xl: 1.5rem; /* @kind font */
  --text-xl:  1.25rem; /* @kind font */
  --text-lg:  1.125rem; /* @kind font */
  --text-md:  1rem; /* @kind font */
  --text-sm:  0.875rem; /* @kind font */
  --text-xs:  0.75rem; /* @kind font */

  /* ---- Eyebrow / overline (mono, tracked, uppercase) ---- */
  --eyebrow-size: 0.8125rem; /* @kind font */
  --eyebrow-tracking: 0.18em; /* @kind font */
  --eyebrow-weight: var(--fw-medium); /* @kind font */

  /* ---- Line heights ---- */
  --leading-tight:   1.05; /* @kind font */
  --leading-snug:    1.18; /* @kind font */
  --leading-normal:  1.5; /* @kind font */
  --leading-relaxed: 1.65; /* @kind font */

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.03em; /* @kind font */
  --tracking-tight:   -0.015em; /* @kind font */
  --tracking-normal:  0; /* @kind font */
  --tracking-wide:    0.04em; /* @kind font */
  --tracking-eyebrow: 0.18em; /* @kind font */
}
/* ============================================================
   PLUR Solutions — Spacing, radii & layout tokens
   Base unit: 4px. Generous, premium rhythm.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6rem;     /* 96 */
  --space-12: 8rem;     /* 128 */

  /* ---- Section rhythm ---- */
  --section-pad-y: clamp(4rem, 2.5rem + 6vw, 8rem);
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --content-max:   720px; /* readable measure */

  /* ---- Radii — soft, rounded (mirrors the circular logo) ---- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;   /* default card */
  --radius-lg:  22px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;
  --radius-circle: 50%;
}
/* ============================================================
   PLUR Solutions — Effects: shadows, glows, blur, motion
   Dark-theme premium: shadows are deep & soft; "elevation" on
   dark is carried by subtle indigo glow + hairline borders.
   ============================================================ */

:root {
  /* ---- Shadows (for dark surfaces) ---- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-lg:  0 24px 60px -16px rgba(0, 0, 0, 0.65);
  --shadow-xl:  0 40px 90px -24px rgba(0, 0, 0, 0.7);

  /* ---- Indigo glows (premium accent elevation) ---- */
  --glow-accent:    0 18px 50px -16px rgba(71, 91, 176, 0.55);
  --glow-accent-sm: 0 8px 24px -10px rgba(115, 134, 213, 0.5);
  --glow-ring:      0 0 0 1px rgba(115, 134, 213, 0.35);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px rgba(115, 134, 213, 0.45);

  /* ---- Inset hairline (top-light edge on cards) ---- */
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.05); /* @kind shadow */

  /* ---- Blur / glass ---- */
  --blur-sm: 8px; /* @kind other */
  --blur-md: 16px; /* @kind other */
  --blur-lg: 28px; /* @kind other */
  --glass-bg: rgba(21, 21, 44, 0.6);

  /* ---- Motion ---- */
  /* default — confident settle */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  /* gentle overshoot */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
  --dur-slower: 700ms; /* @kind other */
}