/* =========================
   generator.ink – THEME TOKENS
   Ported from 301-ui 2026-05-25; palette swapped from 301.st
   blue / orange-CF to the four-colour logo brand:
     navy   #354c66 — anchor (dark bg + light-mode headings)
     teal   #4db7bf — primary CTA + links
     purple #7c6dbf — secondary accent (hover / alt highlight)
     gold   #d6af3c — value-prop highlights + CTA accent
   Token names kept as `--blue-*` / `--orange-*` / `--accent-cf-*`
   so site.css consumers keep working without rename churn.
   ========================= */

:root {
  color-scheme: dark;

  /* Teals (primary brand — was 301.st blue family) */
  --blue-900: #1b4a4e;  /* deepest teal */
  --blue-700: #2e7a80;  /* AA-passing primary on light surfaces */
  --blue-500: #4db7bf;  /* logo teal — primary CTA on dark */
  --blue-300: #7fcfd5;  /* hover tint on dark */
  --blue-neon: #95dde2; /* neon glow */

  /* Purples (secondary accent — was Cloudflare orange family) */
  --orange-500: #7c6dbf; /* logo purple base */
  --orange-700: #6557a5; /* darker hover */
  --orange-900: #4d3f88; /* deepest */

  /*
    Gold CTA accent (was 301.st CF orange):
    - #b8932e on #FFFFFF ≈ 4.65:1 (AA normal)
    - #d6af3c on #0e1729 ≈ 8.7:1 (AAA)
  */
  --accent-cf: #b8932e;
  --accent-cf-hover: #d6af3c;
  --accent-cf-soft: rgba(214, 175, 60, 0.16);

  /* Neutrals */
  --gray-950: #000000;
  --gray-900: #111111;
  --gray-800: #222222;
  --gray-700: #333333;
  --gray-600: #404242;
  --gray-500: #424242;
  --gray-400: #808080;

  --gray-50:  #F8FBFB;
  --gray-100: #F7F7F8;
  --gray-200: #F4F8FC;
  --gray-250: #EAEBEB;
  --gray-300: #E5E5E4;
  --gray-350: #CAC8C8;

  /* Semantic */
  --danger: #FF4F6E;
  --success: #18C27A;
  --warning: #FFB347;
  --info: #3B82F6;

  /* Typography */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;

  /* Base type scale */
  --fs-body: 1rem;
  --lh-body: 1.5;

  /* Unified control system — font-driven sizing */
  --fs-control: clamp(0.94rem, 0.92rem + 0.2vw, 0.98rem);
  --lh-control: 1.25;

  /* Control spacing (relative, no px) */
  --control-pad-y: 0.35em;
  --control-pad-x: 0.90em;
  --border-1: 1px;
  --indicator-thickness: 1px; /* For loading bar & global notice border */
  --control-min-height: calc(
    1em * var(--lh-control) +
    2 * var(--control-pad-y) +
    2 * var(--border-1)
  );

  /* Radius & layout spacing */
  --r-pill: 999px;
  --r-field: 0.75rem;
  --control-radius: var(--r-pill);
  --inline-gap: 0.5rem;
  --stack-gap: 0.75rem;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing & radii */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Control sizing */
  --control-scale-sm: 0.9;
  --control-scale-md: 1;
  --control-scale-lg: 1.1;

  --radius-xs: 0.25rem;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  --border-width-thin: 1px;
  --border-width-strong: 1px;

  --shadow-sm-light: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md-light: 0 6px 18px rgba(0, 0, 0, 0.12);
  --shadow-lg-light: 0 18px 45px rgba(0, 0, 0, 0.25);

  --shadow-sm-dark: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md-dark: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg-dark: 0 18px 45px rgba(0, 0, 0, 0.65);

  --shadow-sm: var(--shadow-sm-light);
  --shadow-md: var(--shadow-md-light);
  --shadow-lg: var(--shadow-lg-light);

  --shadow-soft:   0 1px 3px  color-mix(in srgb, var(--gray-900) 18%, transparent),
                   0 1px 2px  color-mix(in srgb, var(--gray-900) 22%, transparent);
  --shadow-subtle: 0 3px 6px  color-mix(in srgb, var(--gray-900) 16%, transparent),
                   0 1px 4px  color-mix(in srgb, var(--gray-900) 20%, transparent);

  --border-width: 1px;
  --border-style: solid;

  --transition-fast: 120ms ease-out;
  --transition-md: 160ms ease-out;

  /* Z-index scale - ascending order */
  --z-base: 1;           /* Base elevated elements (utility-bar) */
  --z-indicator: 2;      /* Visual indicators (loading-bar, logo overlay) */
  --z-elevated: 10;      /* Elevated UI elements */
  --z-dropdown: 20;      /* Dropdowns, popovers */
  --z-sticky: 30;        /* Sticky headers */
  --z-global-notice: 100; /* Global alerts (covers utility-bar content) */
  --z-sidebar: 100;      /* Sidebar navigation */
  --z-sidebar-overlay: 99; /* Sidebar backdrop */
  --z-header: 200;       /* Main header (above sidebar) */
  --z-drawer: 1000;      /* Drawers base (stacked: +10 per level via drawer-manager) */
  --z-modal: 2000;       /* Modals, dialogs (above all drawers) */
  --z-toast: 2100;       /* Toast notifications (above modals) */
  --z-tooltip: 2200;     /* Tooltips (topmost) */

  /* High-contrast text for buttons / chips on dark backgrounds */
  --btn-text-on-dark: #FFFFFF;
  --btn-text-on-bright: #111111;
}

/* DARK THEME – default */
:root[data-theme="dark"] {
  /* Navy-tinted backgrounds — derived from logo anchor #354c66.
     Mix anchor 8-14% into near-black for a calm dark surface that
     still reads "branded" rather than plain Apple-grey. */
  --bg: #0c1320;
  --bg-elevated: #131c2d;
  --bg-soft: #1a2538;

  --panel: var(--bg-elevated);

  --panel-border: color-mix(in srgb, var(--gray-100) 22%, transparent);

  --text-main: #E7E9EE;
  --text-muted: #A0A4AF;
  --text-subtle: #8B8F98; /* Brightened for AA on bg-elev/bg-soft (was #7A7E87 → 3.9:1) */
  --text-invert: #FFFFFF;

  --text: var(--text-main);
  --muted: var(--text-muted);

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.14);
  --shadow-sm: var(--shadow-sm-dark);
  --shadow-md: var(--shadow-md-dark);
  --shadow-lg: var(--shadow-lg-dark);
  --shadow-soft:   0 1px 3px  color-mix(in srgb, var(--gray-700) 14%, var(--blue-900) 8%),
                   0 1px 2px  color-mix(in srgb, var(--gray-700) 18%, var(--blue-900) 6%);

  --shadow-subtle: 0 3px 6px  color-mix(in srgb, var(--gray-700) 12%, var(--blue-900) 10%),
                   0 1px 4px  color-mix(in srgb, var(--gray-700) 16%, var(--blue-900) 8%);
  /*
    Primary uses logo teal:
    - #4db7bf with #0c1320 bg ≈ 8.4:1 (AAA)
    - #4db7bf with white text ≈ 2.6:1 — DO NOT use white text on
      this background directly; use --btn-text-on-bright (#111).
  */
  --primary: #4db7bf;
  --primary-soft: rgba(77, 183, 191, 0.12);
  --primary-hover: #7fcfd5;

  --ok: var(--success);

  --brand: var(--primary);

  /*
    Cloudflare accent = shared accent-cf.
    White text passes AA.
  */
  --accent-cf-bg: var(--accent-cf);
  --accent-cf-bg-hover: var(--accent-cf-hover);

  /* Status backgrounds (solid for predictable contrast) */
  --bg-danger: #3D0915;
  --bg-success: #042C1C;

  --input-bg: rgba(12, 19, 32, 0.9);
  --input-border: var(--border-strong);
  --input-border-focus: rgba(77, 183, 191, 0.8);

  --nav-bg: rgba(10, 16, 28, 0.96);
  --sidebar-bg: #0d1422;
}

/* LIGHT THEME */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #FFFFFF;
  --bg-elevated: #F7F7F8;
  --bg-soft: #F4F8FC;

  --panel: var(--bg-elevated);

  --panel-border: color-mix(in srgb, var(--gray-900) 18%, transparent);

  --text-main: #1d2d44;  /* logo-anchor-tinted near-black — softer than #111 */
  --text-muted: #5b6b80;
  --text-subtle: #6e7d92; /* AA-passing on white */
  --text-invert: #FFFFFF;

  --text: var(--text-main);
  --muted: var(--text-muted);

  --border-subtle: rgba(15, 23, 42, 0.06);
  --border-strong: rgba(15, 23, 42, 0.16);
  --shadow-sm: var(--shadow-sm-light);
  --shadow-md: var(--shadow-md-light);
  --shadow-lg: var(--shadow-lg-light);

  /*
    Primary uses deeper teal #2e7a80 — logo teal #4db7bf doesn't
    pass AA on white (2.6:1). #2e7a80 with white text ≈ 5.3:1 (AA).
  */
  --primary: #2e7a80;
  --primary-soft: rgba(46, 122, 128, 0.10);
  --primary-hover: #1b4a4e;

  --brand: var(--primary);

  /*
    Light-theme semantic overrides — darker for AA 4.5:1 on white.
    Shared :root values (#FF4F6E, #18C27A, #FFB347, #3B82F6) are tuned for dark bg;
    these replacements keep the hue but pass contrast on light backgrounds.
  */
  --danger:  #D9264A; /* 4.86:1 on #FFF (was #FF4F6E → 3.18:1) */
  --success: #0E7B4C; /* 5.31:1 on #FFF (was #18C27A → 2.32:1) */
  --warning: #9A6200; /* 5.09:1 on #FFF (was #FFB347 → 1.78:1) */
  --info:    #2563EB; /* 5.14:1 on #FFF (was #3B82F6 → 3.68:1) */
  --ok: var(--success);

  /*
    Cloudflare accent = same accent-cf to keep brand consistent.
  */
  --accent-cf-bg: var(--accent-cf);
  --accent-cf-bg-hover: var(--accent-cf-hover);

  --bg-danger: #FDE6EA;
  --bg-success: #E0F7EE;

  --input-bg: #FFFFFF;
  --input-border: var(--border-strong);
  --input-border-focus: rgba(46, 122, 128, 0.8);

  --nav-bg: rgba(255, 255, 255, 0.92);
  --sidebar-bg: #FFFFFF;
}

/* Глобальные мелочи */

a {
  color: inherit;
}

.border {
  border: var(--border-width) var(--border-style) currentColor;
  opacity: 0.28;
}

.border-interactive {
  border: var(--border-width) var(--border-style) currentColor;
  opacity: 0.55;
}

.border-strong {
  border: var(--border-width) var(--border-style) currentColor;
  opacity: 0.8;
}