/* ==========================================================================
   mobilistics Design System — Colors & Type Tokens
   Synced from Claude Design project
   _ds/mobilistics-design-system-66016878-51f1-401c-b832-ff5b58a56c96/colors_and_type.css
   Only change: @font-face src paths point at ../fonts/ and prefer woff2.
   ========================================================================== */

@font-face {
  font-family: 'Swiza';
  src: url('../fonts/Swiza-Regular.woff2') format('woff2'),
       url('../fonts/Swiza-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Swiza';
  src: url('../fonts/Swiza-SemiBold.woff2') format('woff2'),
       url('../fonts/Swiza-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- CORE PALETTE ---------------------------------------------- */
  --color-deep-sea:       #00053D;
  --color-horizon-blue:   #0B5CFF;
  --color-platinum:       #CED5DF;
  --color-grey:           #7E858F;
  --color-silver:         #F1F3F6;
  --color-slate:          #7E858F;
  --color-white:          #FFFFFF;
  --color-black:          #000000;

  /* ---------- ACCENT SPECTRUM ------------------------------------------- */
  --accent-blue:          #0B5CFF;
  --accent-green:         #16A983;
  --accent-cyan:          #00C4FF;
  --accent-pink:          #FF008C;
  --accent-red:           #FF3B20;
  --accent-purple:        #A566EB;

  /* ---------- BRAND & PRODUCT ACCENTS ----------------------------------- */
  --cloud-green:          #16A983;
  --sky-pulse:            #00C4FF;
  --electric-fuchsia:     #FF008C;
  --techno-vermilion:     #FF3B20;
  --quantum-violet:       #A566EB;
  --vpagent-purple:       #A000FF;
  --vpchat-purple:        #C000F5;

  /* ---------- SEMANTIC --------------------------------------------------- */
  --fg-1: var(--color-deep-sea);
  --fg-2: #3A4056;
  --fg-3: var(--color-slate);
  --fg-inverse: var(--color-white);
  --fg-accent: var(--color-horizon-blue);
  --fg-accent-hover: #0947C7;

  --bg-1: var(--color-white);
  --bg-2: var(--color-silver);
  --bg-3: var(--color-platinum);
  --bg-dark: var(--color-deep-sea);

  --border-subtle: var(--color-platinum);
  --border-strong: #9EA3AE;

  /* ---------- TYPE ------------------------------------------------------- */
  --font-display: 'Swiza', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Swiza', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display:   72px;
  --fs-h1:        56px;
  --fs-h2:        44px;
  --fs-h3:        36px;
  --fs-h4:        28px;
  --fs-h5:        22px;
  --fs-lead:      20px;
  --fs-body:      18px;
  --fs-body-web:  16px;
  --fs-small:     14px;
  --fs-caption:   12px;
  --fs-micro:     10px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  --tracking-tight:  -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-caps:    0.12em;

  /* ---------- SPACING & RADII -------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ----------------------------------------------------- */
  --shadow-hair:  0 0 0 1px rgba(0, 5, 61, 0.06);
  --shadow-card:  0 1px 2px rgba(0, 5, 61, 0.04), 0 2px 8px rgba(0, 5, 61, 0.04);
  --shadow-lift:  0 4px 16px rgba(0, 5, 61, 0.06), 0 1px 2px rgba(0, 5, 61, 0.04);
  --shadow-focus: 0 0 0 3px rgba(11, 92, 255, 0.25);

  /* ---------- MOTION ------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  /* ---------- CONTAINER --------------------------------------------------- */
  --container-max: 1280px;
  --container-pad: 48px;
}

html {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--fs-body-web);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); }
h6 { font-size: var(--fs-body); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 600; }

p {
  margin: 0 0 1em;
  line-height: var(--lh-body);
  text-wrap: pretty;
}

a {
  color: var(--fg-accent);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--fg-accent-hover); }

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
}