/* ============================================================
   Syan Design System — tokens (colors, layout, typography, base)
   Compiled from the Syan design system for the standalone site.
   ============================================================ */

/* ---------------- Color tokens ---------------- */
:root {
  /* Core palette */
  --syan-navy:        #0B1A2F;
  --syan-ink-2:       #0E2236;
  --syan-cyan:        #21D4C7;
  --syan-teal:        #0E7C73;
  --syan-slate:       #5B6B7F;
  --syan-mist:        #F5F8FA;
  --syan-white:       #FFFFFF;
  --syan-text-on-dark:#C7D3E0;

  /* Extended navy ramp */
  --syan-navy-900:    #081320;
  --syan-navy-800:    #0B1A2F;
  --syan-navy-700:    #0E2236;
  --syan-navy-600:    #14304A;
  --syan-navy-500:    #1D405F;

  /* Cyan ramp */
  --syan-cyan-soft:   #5FE3D9;
  --syan-cyan-deep:   #16B5AA;
  --syan-cyan-tint:   #E4FAF8;

  /* Light-surface neutrals */
  --syan-line:        #E1E8EE;
  --syan-line-soft:   #EEF2F6;
  --syan-slate-2:     #8493A3;
  --syan-surface:     #FFFFFF;

  /* Product accents */
  --riskat:           #2DA8FF;
  --riskat-deep:      #1E86D6;
  --riskat-tint:      #E7F4FF;
  --audit:            #16B981;
  --audit-deep:       #0F9669;
  --audit-tint:       #E4F8F0;
  --privyx:           #7C6CFF;
  --privyx-deep:      #6354E0;
  --privyx-tint:      #EFEDFF;

  /* Status / semantic */
  --status-success:  #16B981;
  --status-info:     #2DA8FF;
  --status-warning:  #F2A93B;
  --status-danger:   #F0556A;
  --status-success-tint: #E4F8F0;
  --status-info-tint:    #E7F4FF;
  --status-warning-tint: #FCF1DE;
  --status-danger-tint:  #FCE7EA;

  /* Semantic aliases — light context (default) */
  --bg-page:        var(--syan-mist);
  --bg-surface:     var(--syan-white);
  --bg-surface-2:   var(--syan-mist);
  --bg-inset:       var(--syan-line-soft);
  --text-strong:    var(--syan-navy);
  --text-body:      var(--syan-slate);
  --text-muted:     var(--syan-slate-2);
  --text-link:      var(--syan-teal);
  --text-on-accent: var(--syan-navy);
  --border-default: var(--syan-line);
  --border-strong:  #CFD9E2;
  --border-focus:   var(--syan-teal);
  --accent:         var(--syan-cyan);
  --accent-strong:  var(--syan-teal);
}

/* ---------------- Spacing / radius / shadow / motion / layout ---------------- */
:root {
  --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;
  --space-24:96px;--space-32:128px;

  --radius-mark: 24px;
  --radius-card: 16px;
  --radius-ctrl: 10px;
  --radius-sm:   6px;
  --radius-pill: 999px;

  --bw-hairline: 1px;
  --bw-strong:   1.5px;
  --bw-focus:    2px;

  --shadow-xs: 0 1px 2px rgba(11, 26, 47, 0.06);
  --shadow-sm: 0 1px 3px rgba(11, 26, 47, 0.08), 0 1px 2px rgba(11, 26, 47, 0.04);
  --shadow-md: 0 4px 16px rgba(11, 26, 47, 0.08), 0 1px 3px rgba(11, 26, 47, 0.05);
  --shadow-lg: 0 12px 32px rgba(11, 26, 47, 0.12), 0 2px 8px rgba(11, 26, 47, 0.06);
  --shadow-glow: 0 0 0 1px rgba(33, 212, 199, 0.4), 0 6px 24px rgba(33, 212, 199, 0.18);
  --ring-focus: 0 0 0 3px rgba(33, 212, 199, 0.35);

  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-slow:   320ms;

  --container:      1200px;
  --container-wide: 1320px;
  --gutter:         24px;
}

/* ---------------- Typography tokens ---------------- */
:root {
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-ar:      'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

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

  --fs-display-1: 64px; --fs-display-2: 48px;
  --fs-h1: 38px; --fs-h2: 30px; --fs-h3: 24px; --fs-h4: 20px;
  --fs-lg: 18px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 13px;
  --fs-2xs: 11px; --fs-mono: 14px;

  --lh-tight: 1.05; --lh-heading: 1.18; --lh-snug: 1.4; --lh-body: 1.6;

  --tracking-display: -0.02em; --tracking-heading: -0.01em;
  --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em;
  --ar-scale: 1.10;
}

/* ---------------- Base layer ---------------- */
*, *::before, *::after { box-sizing: border-box; }

::selection { background: var(--syan-cyan); color: var(--syan-navy); }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}