/* ==========================================================================
   Life HQ — Design Tokens
   Soft periwinkle · pastel yellow · sage · warm cream. Watercolor, not neon.
   ========================================================================== */

:root {
  /* ---- Color: Periwinkle (primary) ---- */
  --periwinkle-50:  #F2F4FC;
  --periwinkle-100: #E4E9F9;
  --periwinkle-200: #CBD4F1;
  --periwinkle-300: #AEBAE8;
  --periwinkle-400: #93A2E0;
  --periwinkle-500: #7C8EDB;
  --periwinkle-600: #6577C9;
  --periwinkle-700: #5163AD;

  /* ---- Color: Pastel Yellow (accent) ---- */
  --yellow-100: #FFF8E3;
  --yellow-200: #FFEFC0;
  --yellow-300: #FFE49A;
  --yellow-400: #FFD873;
  --yellow-500: #FCC94F;

  /* ---- Color: Sage (support) ---- */
  --sage-100: #EBF2E6;
  --sage-200: #D6E5CD;
  --sage-300: #BAD5AC;
  --sage-400: #9EC28C;
  --sage-500: #83AE6E;
  --sage-600: #6B9758;

  /* ---- Color: Warm Cream (background) ---- */
  --cream:       #FBF6EE;
  --cream-deep:  #F5EDDF;
  --cream-edge:  #EFE4CF;

  /* ---- Color: White (cards) ---- */
  --white:      #FFFFFF;
  --white-soft: #FFFEFB;

  /* ---- Ink (text) — warm charcoal, never pure black ---- */
  --ink:        #3C3849;
  --ink-strong: #2A2732;
  --ink-light:  #6E6A7B;
  --ink-faint:  #A39EB0;
  --ink-mist:   #CFCBDA;

  /* ---- Semantic ---- */
  --color-primary:   var(--periwinkle-500);
  --color-primary-strong: var(--periwinkle-600);
  --color-accent:    var(--yellow-400);
  --color-support:   var(--sage-500);
  --color-bg:        var(--cream);
  --color-surface:   var(--white-soft);
  --color-danger:    #E8998A;

  /* ---- Typography ---- */
  --font-display: 'Lazy Dog', 'Segoe Script', 'Bradley Hand', cursive;
  --font-body: 'Eurofurence', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display-xl: clamp(2.4rem, 1.9rem + 2vw, 3.6rem);
  --fs-display-lg: clamp(1.9rem, 1.6rem + 1.2vw, 2.6rem);
  --fs-display-md: clamp(1.4rem, 1.25rem + 0.6vw, 1.8rem);
  --fs-title:      1.25rem;
  --fs-body:       1rem;
  --fs-small:      0.875rem;
  --fs-tiny:       0.75rem;

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.75;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* ---- Radius ---- */
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* ---- Shadow — soft, layered, never harsh ---- */
  --shadow-xs: 0 1px 2px rgba(60, 56, 73, 0.05);
  --shadow-sm: 0 2px 6px rgba(60, 56, 73, 0.06), 0 1px 2px rgba(60, 56, 73, 0.04);
  --shadow-md: 0 10px 30px rgba(94, 87, 133, 0.10), 0 2px 8px rgba(94, 87, 133, 0.06);
  --shadow-lg: 0 20px 50px rgba(94, 87, 133, 0.14), 0 6px 16px rgba(94, 87, 133, 0.08);
  --shadow-glow-yellow: 0 8px 24px rgba(252, 201, 79, 0.35);
  --shadow-glow-periwinkle: 0 8px 24px rgba(124, 142, 219, 0.30);

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-normal: 280ms;
  --dur-slow: 480ms;

  /* ---- Layout ---- */
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 84px;
  --content-max: 1180px;
}

:root[data-theme="dim"] {
  --color-bg: #EFE9DB;
}