/* =============================================================================
 * Sysculus suite — design tokens
 *
 * Ported verbatim from the Systaumate product design system
 * (Systaumate2.0/Systaumate/web/src/styles/tokens.css), so the marketing sites
 * and the app at app.systaumate.com share ONE visual contract.
 *
 * THE RULES (inherited from the product, do not break them):
 *   1. Components reference a ROLE token, never a raw hex/px.
 *   2. Dark theme re-binds the SAME roles under [data-theme="dark"].
 *   3. --teal is DECORATIVE ONLY. It is never used for text, a meaningful icon,
 *      a white-on-accent fill, or the focus ring — it fails AA for text.
 *      Interactive/text/focus always bind --teal-h (AA-safe, 5.36:1 on white).
 *
 * Marketing additions (not in the product) are clearly marked: the product's
 * type scale is tuned for dense app UI (h1 = 30px); marketing needs a larger
 * display scale, layered on the same family/weights.
 * ========================================================================== */

:root {
  /* ---- Base neutral ramp (theme-independent source values) ---- */
  --neutral-0: #ffffff;
  --neutral-50: #f7f8fa;
  --neutral-100: #eef0f3;
  --neutral-200: #e2e5ea;
  --neutral-300: #e2e5ea;
  --neutral-400: #c9ced6;
  --neutral-500: #9aa2af;
  --neutral-600: #6b7280;
  --neutral-700: #4b5563;
  --neutral-800: #333a45;
  --neutral-900: #1c212b;
  --neutral-950: #0e1116;
  --neutral-1000: #0a0c10;

  /* ---- Brand hero surface (always dark, theme-independent) ----
   * From the product's auth split-screen panel. On marketing sites this is the
   * dark hero / CTA band. White-on-accent here measures 7.62:1. */
  --brand-hero-accent: #0a5c6b;
  --brand-hero-base: var(--neutral-900);
  --brand-hero-spark: #3ad6c9;   /* brightened teal — AA on the dark gradient */
  --brand-hero-glass: rgba(255, 255, 255, 0.06);
  --brand-hero-hair: rgba(255, 255, 255, 0.14);
  --brand-hero-glow: rgba(15, 171, 189, 0.35);
  --brand-hero-glow-2: rgba(124, 92, 246, 0.22);

  /* ==========================================================================
   * LIGHT THEME — semantic role tokens
   * ======================================================================== */

  /* Surface */
  --color-surface-canvas: #fafbfc;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #eef0f3;
  --color-surface-inverse: #0e1116;
  --color-surface-scrim: rgba(10, 12, 16, 0.48);
  --color-surface-chrome: rgba(255, 255, 255, 0.72); /* frosted sticky header */

  /* Border */
  --color-border-default: #e2e5ea;
  --color-border-strong: #c9ced6;

  /* Text */
  --color-text-primary: #1c212b;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;      /* 4.83:1 on white — AA for normal text */
  --color-text-on-accent: #ffffff;
  --color-text-on-inverse: #f7f8fa;
  --color-text-link: #0e7490;

  /* Accent — teal set. See RULE 3 above. */
  --teal: #0fabbd;      /* decorative / non-text only */
  --teal-h: #0e7490;    /* interactive / text / white-on-accent — AA-safe */
  --teal-d: #0a5c6b;    /* pressed */
  --teal-bg: #e4f6f8;   /* selected / subtle background */
  --teal-tint: #bfe6eb; /* subtle border */

  --color-accent-default: var(--teal);
  --color-accent-interactive: var(--teal-h);
  --color-accent-active: var(--teal-d);
  --color-accent-subtle: var(--teal-bg);
  --color-accent-subtle-border: var(--teal-tint);

  /* Semantic status */
  --color-success-text: #187249;
  --color-success-surface: #eafbf3;
  --color-success-border: #b7efd6;
  --color-warning-text: #8a5f0f;
  --color-warning-surface: #fff8e8;
  --color-warning-border: #fce3a6;
  --color-danger-text: #a61f29;
  --color-danger-surface: #fdedee;
  --color-danger-border: #e8555f;
  --color-info-text: #1e5da8;
  --color-info-surface: #eaf3fe;
  --color-info-border: #b9d8fb;

  /* Promo / tip */
  --color-promo-surface: #efebfe;
  --color-promo-border: #e4dbfb;
  --color-promo-text: #6a4ce0;

  /* Interactive states */
  --color-state-hover-overlay: rgba(10, 12, 16, 0.04);
  --color-state-active-overlay: rgba(10, 12, 16, 0.08);
  --color-state-focus-ring: var(--teal-h);
  --color-state-disabled-fg: #767e8c;
  --color-state-disabled-bg: #f0f2f5;
  --color-state-disabled-border: #e2e5ea;

  /* ==========================================================================
   * Typography — Inter, with a system-sans fallback for load resilience.
   * ======================================================================== */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    monospace;

  /* Product (app) scale — kept for parity with app.systaumate.com */
  --type-heading-h1-size: 30px;
  --type-heading-h1-line: 38px;
  --type-heading-h2-size: 22px;
  --type-heading-h2-line: 30px;
  --type-heading-h3-size: 18px;
  --type-heading-h3-line: 26px;
  --type-body-lg-size: 16px;
  --type-body-lg-line: 24px;
  --type-body-md-size: 14px;
  --type-body-md-line: 20px;
  --type-body-sm-size: 13px;
  --type-body-sm-line: 18px;
  --type-label-size: 13px;
  --type-label-line: 16px;
  --type-button-size: 13px;
  --type-button-line: 20px;

  /* MARKETING scale (addition) — the app scale is tuned for dense UI and is
   * too small for a landing page. Same family/weights, fluid sizes. */
  --type-display: clamp(38px, 5.4vw, 62px);
  --type-h1: clamp(33px, 4.6vw, 52px);
  --type-h2: clamp(27px, 3.6vw, 42px);
  --type-h3: clamp(19px, 1.6vw, 22px);
  --type-lead: clamp(17px, 1.5vw, 20px);
  --type-body: 17px;
  --type-body-line: 1.62;
  --type-eyebrow: 12.5px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ---- Spacing (4px base) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;   /* marketing addition — section rhythm */
  --space-24: 96px;   /* marketing addition */

  /* ---- Sizing ---- */
  --size-control-sm: 32px;
  --size-control-md: 36px;
  --size-control-lg: 48px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-header-height: 70px;  /* marketing addition */
  --size-page-max: 1180px;     /* marketing addition */

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 22px;   /* marketing addition — hero/media cards */
  --radius-full: 9999px;

  /* ---- Elevation ---- */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(10, 12, 16, 0.06);
  --elevation-2: 0 4px 12px rgba(10, 12, 16, 0.1);
  --elevation-3: 0 12px 32px rgba(10, 12, 16, 0.14);
  --elevation-4: 0 24px 60px -18px rgba(9, 78, 91, 0.22); /* marketing hero */

  /* ---- Z-index ---- */
  --z-base: 0;
  --z-sticky-chrome: 10;
  --z-dropdown: 20;
  --z-drawer: 30;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;

  /* ---- Motion ---- */
  --motion-duration-instant: 0ms;
  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 320ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-decelerate: cubic-bezier(0, 0, 0, 1);
  --motion-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);

  /* ==========================================================================
   * MARKETING ACCENTS (addition — not in the product app)
   *
   * The app palette is deliberately restrained for dense UI: one hue, flat
   * tints. On a landing page that reads flat, so marketing gets a richer
   * decorative layer — gradient icon badges, coloured glows, ambient washes.
   *
   * STRICTLY DECORATIVE. These are never used for body text or as the sole
   * carrier of meaning. Text, links, focus rings and interactive states still
   * bind --teal-h. Icons on these gradients are white (high contrast) and are
   * always paired with a visible text label.
   * ======================================================================== */
  /* Stops are MEASURED, not eyeballed: the white glyph clears 3:1 against the
   * lightest stop and ~4.5:1 against the darkest, so it stays crisp across the
   * whole sweep. A prettier but paler stop makes the icon look washed out. */
  --grad-teal:   linear-gradient(135deg, #0fa2b2 0%, #0e7490 100%); /* 3.07 → 5.36 */
  --grad-violet: linear-gradient(135deg, #8b6cf8 0%, #6a4ce0 100%); /* 3.75 → 5.64 */
  --grad-cyan:   linear-gradient(135deg, #21a69d 0%, #0b8290 100%); /* 3.00 → 4.56 */
  --grad-amber:  linear-gradient(135deg, #bc872d 0%, #af6203 100%); /* 3.16 → 4.59 */
  --grad-green:  linear-gradient(135deg, #2aa964 0%, #10783f 100%); /* 3.02 → 5.55 */
  --grad-rose:   linear-gradient(135deg, #e56b87 0%, #d92d54 100%); /* 3.10 → 4.72 */

  /* Matching coloured glows — give badges/cards depth instead of flat shadow */
  --glow-teal:   0 10px 24px -10px rgba(14, 116, 144, 0.55);
  --glow-violet: 0 10px 24px -10px rgba(106, 76, 224, 0.5);
  --glow-cyan:   0 10px 24px -10px rgba(11, 130, 144, 0.5);
  --glow-amber:  0 10px 24px -10px rgba(175, 98, 3, 0.45);
  --glow-green:  0 10px 24px -10px rgba(16, 120, 63, 0.45);
  --glow-rose:   0 10px 24px -10px rgba(217, 45, 84, 0.45);

  /* Ambient washes for light sections — the light-mode cousin of the dark
     band's aurora, so pages have depth instead of flat white. */
  --wash-teal:   radial-gradient(60% 55% at 82% 6%, rgba(15, 171, 189, 0.13), transparent 62%);
  --wash-violet: radial-gradient(48% 50% at 10% 4%, rgba(124, 92, 246, 0.11), transparent 58%);
  --wash-cyan:   radial-gradient(44% 46% at 60% 100%, rgba(34, 199, 188, 0.10), transparent 60%);
}

/* =============================================================================
 * PER-PRODUCT ACCENT (the only block a site should override)
 *
 * All suite sites default to the shared Systaumate teal, because the products
 * are interlinked and each one hands off to Systaumate at some phase.
 * If a product ever needs to differentiate, override ONLY these five values —
 * and keep the AA contract: -h must clear 4.5:1 on white for text.
 *
 *   :root{
 *     --teal:#....;      // decorative only
 *     --teal-h:#....;    // interactive/text — MUST be AA on white
 *     --teal-d:#....;    // pressed
 *     --teal-bg:#....;   // subtle background
 *     --teal-tint:#....; // subtle border
 *   }
 * ========================================================================== */

/* =============================================================================
 * DARK THEME — the same roles re-bound (full parity with the product).
 * Opt-in: set data-theme="dark" on <html>. Marketing pages are light by
 * default; this is here so a site can adopt dark without new tokens.
 * ========================================================================== */
[data-theme='dark'] {
  --color-surface-canvas: #0e1116;
  --color-surface-raised: #1c212b;
  --color-surface-sunken: #0a0c10;
  --color-surface-inverse: #f7f8fa;
  --color-surface-scrim: rgba(10, 12, 16, 0.64);
  --color-surface-chrome: rgba(20, 24, 32, 0.72);

  --color-border-default: #4b5563;
  --color-border-strong: #6b7280;

  --color-text-primary: #f7f8fa;
  --color-text-secondary: #e2e5ea;
  --color-text-muted: #c9ced6;
  --color-text-on-accent: #06231f;
  --color-text-on-inverse: #0e1116;
  --color-text-link: #2fd4c7;

  --teal: #22c7bc;
  --teal-h: #2fd4c7;
  --teal-d: #17b0a6;
  --teal-bg: #0c2a29;
  --teal-tint: #1e4a47;

  --color-accent-default: var(--teal);
  --color-accent-interactive: var(--teal-h);
  --color-accent-active: var(--teal-d);
  --color-accent-subtle: var(--teal-bg);
  --color-accent-subtle-border: var(--teal-tint);

  --color-success-text: #4fc98c;
  --color-success-surface: #0e4a31;
  --color-success-border: #1f8a5c;
  --color-warning-text: #f0b429;
  --color-warning-surface: #5c3e0a;
  --color-warning-border: #b37e14;
  --color-danger-text: #f37981;
  --color-danger-surface: #5c1319;
  --color-danger-border: #b32a34;
  --color-info-text: #5fa3f5;
  --color-info-surface: #0f3159;
  --color-info-border: #1e5da8;

  --color-promo-surface: #1e1a3a;
  --color-promo-border: #2e2857;
  --color-promo-text: #b6a4ff;

  --color-state-hover-overlay: rgba(255, 255, 255, 0.06);
  --color-state-active-overlay: rgba(255, 255, 255, 0.1);
  --color-state-focus-ring: var(--teal-h);
  --color-state-disabled-fg: #9aa2af;
  --color-state-disabled-bg: #151a22;
  --color-state-disabled-border: #4b5563;

  --elevation-1: 0 1px 2px rgba(10, 12, 16, 0.24);
  --elevation-2: 0 4px 12px rgba(10, 12, 16, 0.36);
  --elevation-3: 0 12px 32px rgba(10, 12, 16, 0.48);
}

/* Reduced motion: collapse motion at the source, so no component checks the
 * media query itself. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 0ms;
    --motion-duration-base: 0ms;
    --motion-duration-slow: 0ms;
  }
}