/* ============================================
   ASHTAMI DESIGN STUDIO — Design Tokens
   ============================================ */

:root {
  /* ---- Brand Colors (Dusty Mauve Palette) ---- */
  --color-primary:        #A07D84;
  --color-primary-dark:   #6B4F55;
  --color-primary-darker: #4A353A;
  --color-primary-light:  #C9AEB3;
  --color-primary-lighter:#E8D8DB;
  --color-primary-lightest:#F5EEEF;

  --color-white:          #FFFFFF;
  --color-off-white:      #FBF8F8;
  --color-bg:             #FAF7F7;

  /* ---- Text Colors (Darkened for better contrast) ---- */
  --color-text:           #2D2327;
  --color-text-light:     #4A3C40;   /* significantly darker */
  --color-text-muted:     #6D5A5E;   /* significantly darker */
  --color-text-on-dark:   #F5EEEF;

  /* ---- Accent / Gold (for CTAs, highlights) ---- */
  --color-accent:         #C5A880;
  --color-accent-light:   #E0D0B8;
  --color-accent-dark:    #9E8460;

  /* ---- Feedback Colors ---- */
  --color-success:        #7BA882;
  --color-error:          #C47A7A;
  --color-warning:        #D4A86A;

  /* ---- Typography ---- */
  --font-heading:         'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-accent:          'Cormorant Garamond', Georgia, serif;

  --fs-display:           clamp(3rem, 6vw, 5.5rem);
  --fs-h1:                clamp(2.25rem, 4.5vw, 4rem);
  --fs-h2:                clamp(1.75rem, 3.5vw, 3rem);
  --fs-h3:                clamp(1.35rem, 2.5vw, 2rem);
  --fs-h4:                clamp(1.1rem, 1.8vw, 1.5rem);
  --fs-body:              1rem;
  --fs-body-lg:           1.125rem;
  --fs-small:             0.875rem;
  --fs-xs:                0.75rem;

  --fw-light:             300;
  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;

  --lh-tight:             1.2;
  --lh-normal:            1.6;
  --lh-relaxed:           1.8;

  --ls-tight:             -0.02em;
  --ls-normal:            0;
  --ls-wide:              0.05em;
  --ls-wider:             0.12em;
  --ls-widest:            0.2em;

  /* ---- Spacing Scale ---- */
  --space-2xs:            0.25rem;   /* 4px */
  --space-xs:             0.5rem;    /* 8px */
  --space-sm:             0.75rem;   /* 12px */
  --space-md:             1rem;      /* 16px */
  --space-lg:             1.5rem;    /* 24px */
  --space-xl:             2rem;      /* 32px */
  --space-2xl:            3rem;      /* 48px */
  --space-3xl:            4rem;      /* 64px */
  --space-4xl:            6rem;      /* 96px */
  --space-5xl:            8rem;      /* 128px */

  /* ---- Layout ---- */
  --max-width:            1320px;
  --max-width-narrow:     900px;
  --max-width-blog:       760px;
  --header-height:        80px;
  --sidebar-width:        300px;

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

  --border-thin:          1px solid var(--color-primary-lighter);
  --border-medium:        2px solid var(--color-primary-light);

  /* ---- Shadows ---- */
  --shadow-sm:            0 1px 3px rgba(74, 53, 58, 0.06);
  --shadow-md:            0 4px 12px rgba(74, 53, 58, 0.08);
  --shadow-lg:            0 8px 30px rgba(74, 53, 58, 0.12);
  --shadow-xl:            0 16px 50px rgba(74, 53, 58, 0.16);
  --shadow-glow:          0 0 30px rgba(160, 125, 132, 0.2);

  /* ---- Transitions ---- */
  --ease-out:             cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:          cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce:          cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:        150ms;
  --duration-normal:      300ms;
  --duration-slow:        500ms;
  --duration-slower:      800ms;

  /* ---- Z-Indexes ---- */
  --z-behind:             -1;
  --z-base:               1;
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-header:             300;
  --z-overlay:            400;
  --z-modal:              500;
  --z-toast:              600;
  --z-tooltip:            700;

  /* ---- Glassmorphism ---- */
  --glass-bg:             rgba(255, 255, 255, 0.75);
  --glass-blur:           blur(20px);
  --glass-border:         1px solid rgba(255, 255, 255, 0.3);
}