/* ============================================================
   SANNAWAVE — DESIGN TOKENS
   Brand: Neuro-wellness wearable (Oura/Eight Sleep/Muse ref)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,300;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap');

:root {
  /* --- Colors --- */
  --sw-teal:        #1D9E75;
  --sw-teal-light:  #25C490;
  --sw-teal-dark:   #16785A;
  --sw-teal-faint:  #E8F7F2;
  --sw-indigo:      #534AB7;
  --sw-indigo-light:#7169D4;
  --sw-indigo-dark: #3E3690;
  --sw-indigo-faint:#EFEDFA;

  --sw-bg:          #FFFFFF;
  --sw-bg-soft:     #F9F9F7;
  --sw-bg-dark:     #131312;
  --sw-bg-dark2:    #1C1C1A;

  --sw-text:        #2C2C2A;
  --sw-text-muted:  #6B6B68;
  --sw-text-light:  #9B9B97;
  --sw-text-inv:    #F5F5F3;

  --sw-border:      #E8E8E4;
  --sw-border-dark: #2E2E2C;

  /* --- Score palette --- */
  --sw-score-focus:  #1D9E75;
  --sw-score-calm:   #534AB7;
  --sw-score-rest:   #2CB5A0;
  --sw-score-main:   #1D9E75;

  /* --- Typography --- */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  /* --- Spacing --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.08);
  --shadow-teal:  0 8px 32px rgba(29,158,117,.22);
  --shadow-indigo:0 8px 32px rgba(83,74,183,.22);

  /* --- Transitions --- */
  --ease-out:   cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --dur-slow:   400ms;

  /* --- Layout --- */
  --container-max: 1200px;
  --navbar-h: 72px;
}