/* GLOBAL DESIGN TOKENS
   themes.css — Sage Green · Muted Pink · Cream*/

:root {

  /* =========================
     COLORS
  ========================= */

  /* Primary Palette */
  --color-sage:            #6B8F5E;
  --color-sage-dark:       #4A6741;
  --color-sage-light:      #5C7A52;

  --color-pink:            #D4848A;
  --color-pink-light:      #E8A5A8;
  --color-pink-blush:      #F2C9C4;

  --color-cream:           #EDE8DC;
  --color-cream-warm:      #C9B89A;

  /* Functional Color Roles */
  --color-primary:         #6B8F5E;   /* sage green */
  --color-primary-hover:   #4A6741;   /* deep sage */

  --color-secondary:       #D4848A;   /* muted pink */
  --color-secondary-hover: #E8A5A8;   /* soft pink */

  --color-accent:          #F2C9C4;   /* blush */

  /* Backgrounds & Surfaces */
  --color-bg:              #F7F3EC;   /* warm off-white */
  --color-surface:         #EDE8DC;   /* cream */
  --color-surface-raised:  #FFFFFF;

  /* Text */
  --color-text-primary:    #3D3530;   /* warm near-black */
  --color-text-secondary:  #7A6E68;   /* warm mid-grey */
  --color-text-muted:      #A89B8C;   /* greige */

  /* Borders */
  --color-border:          #D6CEBC;
  --color-border-soft:     #EDE8DC;

  /* Neutrals */
  --color-neutral:         #A89B8C;   /* greige */
  --color-warm-grey:       #8C8078;

  /* State Colors */
  --color-success:         #8DC87A;   /* soft green */
  --color-warning:         #F5C842;   /* warm yellow */
  --color-error:           #D96B6B;   /* muted red */
  --color-info:            #6B8F5E;   /* sage (reused) */



  /*TYPOGRAPHY*/

  --font-family-sans:      "DM Sans", system-ui, sans-serif;
  --font-family-serif:     "Cormorant Garamond", Georgia, serif;
  --font-family-mono:      "JetBrains Mono", monospace;

  --font-size-xs:          0.75rem;
  --font-size-sm:          0.875rem;
  --font-size-md:          1rem;
  --font-size-lg:          1.125rem;
  --font-size-xl:          1.25rem;
  --font-size-2xl:         1.5rem;
  --font-size-3xl:         1.875rem;
  --font-size-4xl:         2.25rem;

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

  --line-height-tight:     1.2;
  --line-height-normal:    1.5;
  --line-height-loose:     1.75;



  /* SPACING SCALE*/

  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   3rem;
  --space-8:   4rem;



  /* BORDER RADIUS */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;



  /* 
     SHADOWS
  */

  --shadow-sm:  0 1px 2px rgba(61, 53, 48, 0.06);
  --shadow-md:  0 4px 6px rgba(61, 53, 48, 0.08);
  --shadow-lg:  0 10px 20px rgba(61, 53, 48, 0.12);
  --shadow-xl:  0 20px 40px rgba(61, 53, 48, 0.16);



  /* 
     Z INDEX
  */

  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-fixed:    1200;
  --z-modal:    1300;
  --z-toast:    1400;



  /*
     ANIMATION*/

  --duration-fast:    120ms;
  --duration-normal:  200ms;
  --duration-slow:    350ms;

  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);

}



/* 
   DARK THEME*/

[data-theme="dark"] {

  --color-bg:              #1E1A18;
  --color-surface:         #2A2420;
  --color-surface-raised:  #332C29;

  --color-text-primary:    #F2EDE4;
  --color-text-secondary:  #C4B8AF;
  --color-text-muted:      #8C7E76;

  --color-border:          #3D3530;
  --color-border-soft:     #2A2420;

  --color-primary:         #8DC87A;   /* lighter sage for contrast */
  --color-primary-hover:   #6B8F5E;

  --color-secondary:       #E8A5A8;   /*lighter pink for contrast */

}