/* ==========================================================================
   Softbitrix — Design Tokens
   Palette: "Electric Spectrum" — violet + cyan duotone drawn from the logo
   mark, set on warm cream with navy ink.

   Values are precomputed literals rather than color-mix() so the site renders
   identically on older browsers and the compositor has no work to do at paint.
   ========================================================================== */

/* --- Self-hosted variable fonts (latin subset, 96 KB total) --------------- */
@font-face {
  font-family: 'Sora';
  src: url('../assets/fonts/sora.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  /* optional + preload: use webfont when ready in time, else keep metrics-stable fallback */
  font-display: optional;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  /* optional avoids late body-text reflow that hurts CLS on desktop audits */
  font-display: optional;
}

:root {
  /* ---------------------------------------------------------------- colour */
  /* violet — primary */
  --sb-violet-50:  #F5F0FE;
  --sb-violet-100: #EFE7FE;
  --sb-violet-200: #DDCDFC;
  --sb-violet-300: #C4A8F9;
  --sb-violet-400: #A578F4;
  --sb-violet-500: #8B4FEF;
  --sb-violet-600: #7C3AED;
  --sb-violet-700: #6926D9;
  --sb-violet-800: #571FB0;
  --sb-violet-900: #3F1780;
  --sb-violet-950: #2A0F57;

  /* cyan — accent, from the logo gradient */
  --sb-cyan-50:  #ECFDFF;
  --sb-cyan-100: #DCF6FA;
  --sb-cyan-200: #B3EBF4;
  --sb-cyan-300: #7DDDEC;
  --sb-cyan-400: #38C7DE;
  --sb-cyan-500: #06B6D4;
  --sb-cyan-600: #0693AC;
  --sb-cyan-700: #0A7387;
  --sb-cyan-800: #115E6E;

  /* amber/coral — secondary, for warmth and CTA emphasis */
  --sb-amber-50:  #FFF7ED;
  --sb-amber-100: #FEEBDC;
  --sb-amber-200: #FDD5B4;
  --sb-amber-300: #FBB77F;
  --sb-amber-400: #FB923C;
  --sb-amber-500: #F97316;
  --sb-amber-600: #DC5F0C;
  --sb-amber-700: #A9440A;

  /* neutrals — warm cream through navy ink */
  --sb-cream-50:  #FEFDFB;
  --sb-cream-100: #FAF7F2;
  --sb-cream-200: #F4EFE6;
  --sb-cream-300: #EAE3D6;
  --sb-cream-400: #E4DED3;
  --sb-cream-500: #CFC7B8;
  --sb-navy-300:  #8E97B4;
  --sb-navy-400:  #6B7699;
  --sb-navy-500:  #4A5578;
  --sb-navy-600:  #33406B;
  --sb-navy-700:  #222E52;
  --sb-navy-800:  #141F42;
  --sb-navy-900:  #0B1533;
  --sb-navy-950:  #070E24;

  /* ------------------------------------------------------- semantic roles */
  --sb-bg:            var(--sb-cream-100);
  --sb-bg-alt:        var(--sb-cream-200);
  --sb-bg-deep:       var(--sb-navy-900);
  --sb-surface:       #FFFFFF;
  --sb-surface-2:     var(--sb-cream-50);
  --sb-surface-sunk:  var(--sb-cream-200);

  --sb-ink:           var(--sb-navy-900);
  --sb-ink-2:         var(--sb-navy-700);
  --sb-muted:         var(--sb-navy-500);
  --sb-muted-2:       var(--sb-navy-400);
  --sb-on-deep:       #FFFFFF;
  --sb-on-deep-muted: #A9B3CE;

  --sb-line:          var(--sb-cream-400);
  --sb-line-soft:     var(--sb-cream-300);
  --sb-line-strong:   var(--sb-cream-500);
  --sb-line-deep:     rgba(255, 255, 255, .14);
  /* Form controls are the one boundary WCAG 1.4.11 requires to reach 3:1,
     since the border is what identifies the field. Cream lines cannot. */
  --sb-line-field:    #8891AE;              /* on white              3.13:1 */
  --sb-placeholder:   #67718F;              /* on white              4.84:1 */

  --sb-primary:       var(--sb-violet-600);
  --sb-primary-hover: var(--sb-violet-700);
  --sb-primary-ink:   var(--sb-violet-800); /* violet as readable text  6.4:1 */
  --sb-primary-soft:  var(--sb-violet-100);
  --sb-primary-tint:  var(--sb-violet-50);
  --sb-on-primary:    #FFFFFF;

  --sb-accent:        var(--sb-cyan-500);
  --sb-accent-hover:  var(--sb-cyan-600);
  --sb-accent-ink:    var(--sb-cyan-800); /* cyan as readable text     5.1:1 */
  --sb-accent-soft:   var(--sb-cyan-100);
  --sb-accent-tint:   var(--sb-cyan-50);

  --sb-secondary:      var(--sb-amber-400);
  --sb-secondary-ink:  var(--sb-amber-700); /* amber as readable text  5.3:1 */
  --sb-secondary-soft: var(--sb-amber-100);
  --sb-secondary-tint: var(--sb-amber-50);
  --sb-on-secondary:   #24160A; /* dark ink on amber              10.9:1 */

  --sb-success:      #0E7C57;
  --sb-success-soft: #DFF5EC;
  --sb-danger:       #B32318;
  --sb-danger-soft:  #FDECEA;
  --sb-focus:        var(--sb-violet-600);

  /* duotone gradient — used sparingly, echoes the logo mark only */
  --sb-duotone: linear-gradient(135deg, var(--sb-cyan-500) 0%, var(--sb-violet-600) 100%);
  --sb-duotone-soft: linear-gradient(135deg, var(--sb-cyan-100) 0%, var(--sb-violet-100) 100%);

  /* ------------------------------------------------------------ typography */
  --sb-font-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sb-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sb-font-mono: ui-monospace, 'Cascadia Code', 'SFMono-Regular', Consolas, monospace;

  /* fluid scale — min at 360px viewport, max at 1400px */
  --sb-text-2xs:    0.6875rem;                                  /* 11px      */
  --sb-text-xs:     0.75rem;                                    /* 12px      */
  --sb-text-sm:     0.8125rem;                                  /* 13px      */
  --sb-text-md:     0.875rem;                                   /* 14px      */
  --sb-text-base:   clamp(0.9375rem, 0.90rem + 0.17vw, 1.0625rem);  /* 15→17 */
  --sb-text-lg:     clamp(1.0625rem, 1.00rem + 0.29vw, 1.25rem);    /* 17→20 */
  --sb-text-xl:     clamp(1.1875rem, 1.09rem + 0.43vw, 1.4375rem);  /* 19→23 */
  --sb-text-h4:     clamp(1.0625rem, 1.00rem + 0.29vw, 1.25rem);    /* 17→20 */
  --sb-text-h3:     clamp(1.375rem, 1.21rem + 0.72vw, 1.875rem);    /* 22→30 */
  --sb-text-h2:     clamp(1.75rem, 1.42rem + 1.44vw, 2.75rem);      /* 28→44 */
  --sb-text-h1:     clamp(2.125rem, 1.62rem + 2.16vw, 3.5rem);      /* 34→56 */
  --sb-text-display: clamp(2.375rem, 1.66rem + 3.10vw, 4.25rem);    /* 38→68 */

  --sb-leading-tight: 1.06;
  --sb-leading-snug: 1.22;
  --sb-leading-normal: 1.5;
  --sb-leading-relaxed: 1.68;

  --sb-tracking-display: -0.03em;
  --sb-tracking-tight: -0.02em;
  --sb-tracking-normal: -0.011em;
  --sb-tracking-wide: 0.04em;
  --sb-tracking-caps: 0.13em;

  --sb-weight-normal: 400;
  --sb-weight-medium: 500;
  --sb-weight-semibold: 600;
  --sb-weight-bold: 700;

  /* --------------------------------------------------------------- spacing */
  --sb-space-1:  0.25rem;   /*  4 */
  --sb-space-2:  0.5rem;    /*  8 */
  --sb-space-3:  0.75rem;   /* 12 */
  --sb-space-4:  1rem;      /* 16 */
  --sb-space-5:  1.25rem;   /* 20 */
  --sb-space-6:  1.5rem;    /* 24 */
  --sb-space-8:  2rem;      /* 32 */
  --sb-space-10: 2.5rem;    /* 40 */
  --sb-space-12: 3rem;      /* 48 */
  --sb-space-16: 4rem;      /* 64 */
  --sb-space-20: 5rem;      /* 80 */
  --sb-space-24: 6rem;      /* 96 */
  --sb-space-32: 8rem;      /* 128 */

  --sb-section-y: clamp(3.5rem, 2.2rem + 5.6vw, 7.5rem);
  --sb-section-y-sm: clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem);

  /* ---------------------------------------------------------------- layout */
  --sb-container: 1200px;
  --sb-container-wide: 1320px;
  --sb-gutter: clamp(1.25rem, 0.85rem + 2vw, 3rem);
  --sb-header-h: 86px;
  --sb-header-h-compact: 58px;

  /* ---------------------------------------------------------------- radius */
  --sb-radius-xs: 6px;
  --sb-radius-sm: 10px;
  --sb-radius: 14px;
  --sb-radius-lg: 20px;
  --sb-radius-xl: 28px;
  --sb-radius-2xl: 36px;
  --sb-radius-full: 999px;

  /* --------------------------------------------------------------- shadows */
  --sb-shadow-xs: 0 1px 2px rgba(11, 21, 51, .06);
  --sb-shadow-sm: 0 2px 8px -2px rgba(11, 21, 51, .10);
  --sb-shadow: 0 12px 28px -14px rgba(11, 21, 51, .18);
  --sb-shadow-lg: 0 24px 48px -24px rgba(11, 21, 51, .22);
  --sb-shadow-xl: 0 36px 72px -32px rgba(11, 21, 51, .26);
  --sb-shadow-primary: 0 12px 26px -12px rgba(124, 58, 237, .50);
  --sb-shadow-primary-lg: 0 20px 38px -14px rgba(124, 58, 237, .55);
  --sb-shadow-secondary: 0 12px 26px -14px rgba(249, 115, 22, .52);
  --sb-ring: 0 0 0 3px rgba(124, 58, 237, .22);

  /* ---------------------------------------------------------------- motion */
  --sb-dur-instant: 90ms;
  --sb-dur-fast: 150ms;
  --sb-dur: 240ms;
  --sb-dur-slow: 420ms;
  --sb-dur-slower: 720ms;
  --sb-ease: cubic-bezier(.22, .61, .36, 1);
  --sb-ease-out: cubic-bezier(.16, 1, .3, 1);
  --sb-ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --sb-ease-spring: cubic-bezier(.34, 1.36, .64, 1);

  /* --------------------------------------------------------------- z-index */
  --sb-z-base: 1;
  --sb-z-raised: 10;
  --sb-z-sticky: 100;
  --sb-z-header: 200;
  --sb-z-drawer: 300;
  --sb-z-toast: 400;
}