/* =============================================================
   One AiQ Design System — Core Tokens
   Shared by One AiQ (parent) + ProAnimal (sub-brand)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ——— Brand — One AiQ ——————————————————————————————— */
  --oa-navy-950: #0A1628;   /* deepest — backgrounds in dark mode, logo wordmark */
  --oa-navy-900: #0F1F3A;
  --oa-navy-800: #152B4D;   /* primary brand navy (logo) */
  --oa-navy-700: #1F3A66;
  --oa-navy-600: #2C4E82;
  --oa-navy-500: #3C66A3;
  --oa-navy-400: #6B8CC1;
  --oa-navy-300: #9DB4D7;
  --oa-navy-200: #C7D3E8;
  --oa-navy-100: #E3EAF4;
  --oa-navy-50:  #F3F6FB;

  --oa-teal-900: #0D6B6E;
  --oa-teal-800: #0F8488;
  --oa-teal-700: #12A0A5;   /* logo dot teal */
  --oa-teal-600: #2EB8BD;
  --oa-teal-500: #4FCED3;
  --oa-teal-400: #7BDDE1;
  --oa-teal-300: #A8E9EC;
  --oa-teal-200: #CDF3F5;
  --oa-teal-100: #E4F9FA;
  --oa-teal-50:  #F2FCFC;

  /* ——— Brand — ProAnimal (warmer accent for sub-brand) ——— */
  --pa-amber-900: #7A3E0B;
  --pa-amber-700: #C86A10;
  --pa-amber-600: #E68019;
  --pa-amber-500: #F59E2C;   /* ProAnimal accent */
  --pa-amber-300: #FCC67A;
  --pa-amber-100: #FDE9C8;
  --pa-amber-50:  #FFF6E8;

  /* ——— Neutrals (warm-leaning, editorial) ————————————— */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAF9;
  --neutral-100: #F4F4F2;
  --neutral-150: #EBEBE8;
  --neutral-200: #DFDFDB;
  --neutral-300: #C7C7C2;
  --neutral-400: #9E9E98;
  --neutral-500: #73736D;
  --neutral-600: #54544F;
  --neutral-700: #3B3B37;
  --neutral-800: #262623;
  --neutral-900: #171715;
  --neutral-950: #0D0D0C;

  /* ——— Semantic (light theme defaults) ———————————————— */
  --success-50:  #ECFDF5;
  --success-100: #D1FADF;
  --success-500: #10A572;
  --success-600: #0E8B60;
  --success-700: #0A6B4A;

  --warning-50:  #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-500: #F5A524;
  --warning-600: #D48A0F;
  --warning-700: #9C6308;

  --danger-50:   #FEF2F2;
  --danger-100:  #FEE2E2;
  --danger-500:  #E5484D;
  --danger-600:  #C42930;
  --danger-700:  #991F24;

  --info-50:     #EFF6FF;
  --info-100:    #DBEAFE;
  --info-500:    #3B82F6;
  --info-600:    #2563EB;
  --info-700:    #1D4ED8;

  /* ——— Surfaces + role tokens (light) —————————————————— */
  --bg-canvas:     var(--neutral-50);
  --bg-surface:    var(--neutral-0);
  --bg-subtle:     var(--neutral-100);
  --bg-muted:      var(--neutral-150);
  --bg-inverse:    var(--oa-navy-950);

  --fg-primary:    var(--neutral-900);
  --fg-secondary:  var(--neutral-600);
  --fg-tertiary:   var(--neutral-500);
  --fg-disabled:   var(--neutral-400);
  --fg-on-brand:   var(--neutral-0);
  --fg-on-inverse: var(--neutral-0);
  --fg-brand:      var(--oa-navy-800);
  --fg-accent:     var(--oa-teal-700);
  --fg-link:       var(--oa-teal-800);

  --border-subtle: var(--neutral-150);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-400);
  --border-brand:  var(--oa-navy-800);
  --border-focus:  var(--oa-teal-600);

  --accent-primary:    var(--oa-navy-800);
  --accent-primary-hover: var(--oa-navy-700);
  --accent-primary-active: var(--oa-navy-900);
  --accent-secondary:  var(--oa-teal-700);
  --accent-secondary-hover: var(--oa-teal-800);

  /* ——— Type scale ————————————————————————————————————— */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  56px;
  --text-5xl:  72px;
  --text-6xl:  96px;

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;

  /* ——— Spacing (4-based) —————————————————————————————— */
  --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 ————————————————————————————————————————— */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ——— Shadows (editorial, soft) —————————————————————— */
  --shadow-xs: 0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-sm: 0 2px 4px rgba(10, 22, 40, 0.05), 0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-md: 0 6px 16px rgba(10, 22, 40, 0.07), 0 2px 4px rgba(10, 22, 40, 0.04);
  --shadow-lg: 0 16px 32px rgba(10, 22, 40, 0.10), 0 4px 8px rgba(10, 22, 40, 0.05);
  --shadow-xl: 0 28px 56px rgba(10, 22, 40, 0.14), 0 8px 16px rgba(10, 22, 40, 0.06);
  --shadow-focus: 0 0 0 3px rgba(18, 160, 165, 0.35);
  --shadow-focus-navy: 0 0 0 3px rgba(44, 78, 130, 0.30);

  /* ——— Motion ————————————————————————————————————————— */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-slower: 560ms;

  /* ——— Layout ————————————————————————————————————————— */
  --container-sm:  640px;
  --container-md:  800px;
  --container-lg:  1040px;
  --container-xl:  1240px;
  --container-2xl: 1440px;

  /* ——— Hero scroll animation ————————————————————————— */
  --progress: 0;
  --prog1: 0;
  --prog2: 0;
  --center-offset: 0px;

  /* ——— Z-index scale ————————————————————————————————— */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ——— Dark theme overrides ———————————————————————————— */
[data-theme="dark"] {
  --bg-canvas:    var(--oa-navy-950);
  --bg-surface:   #0F1F3A;
  --bg-subtle:    #152B4D;
  --bg-muted:     #1C3257;
  --bg-inverse:   var(--neutral-50);

  --fg-primary:    #F3F6FB;
  --fg-secondary:  #9DB4D7;
  --fg-tertiary:   #6B8CC1;
  --fg-disabled:   #3C66A3;
  --fg-on-brand:   var(--neutral-0);
  --fg-on-inverse: var(--neutral-900);
  --fg-brand:      #A8E9EC;
  --fg-accent:     var(--oa-teal-500);
  --fg-link:       var(--oa-teal-400);

  --border-subtle: rgba(157, 180, 215, 0.08);
  --border-default: rgba(157, 180, 215, 0.15);
  --border-strong: rgba(157, 180, 215, 0.30);

  --accent-primary:    var(--oa-teal-600);
  --accent-primary-hover: var(--oa-teal-500);
  --accent-primary-active: var(--oa-teal-700);
  --accent-secondary:  var(--oa-teal-400);
  --accent-secondary-hover: var(--oa-teal-300);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.50);
  --shadow-xl: 0 28px 56px rgba(0, 0, 0, 0.55);
}

/* ——— Base reset / normalize ————————————————————————— */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

/* ——— Utility primitives used across previews ———————— */
.ds-page {
  min-height: 100vh;
  padding: var(--space-12) var(--space-10);
}
.ds-page__inner { max-width: var(--container-xl); margin: 0 auto; }
.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin: 0 0 var(--space-3);
}
.ds-h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  color: var(--fg-primary);
}
.ds-h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  margin: var(--space-10) 0 var(--space-4);
  color: var(--fg-primary);
}
.ds-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  margin: var(--space-6) 0 var(--space-2);
  color: var(--fg-primary);
}
.ds-lede {
  font-size: var(--text-md);
  color: var(--fg-secondary);
  max-width: 72ch;
  margin: 0 0 var(--space-6);
}
.ds-caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-tertiary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.ds-divider {
  height: 1px; background: var(--border-default); border: 0;
  margin: var(--space-10) 0;
}