/* ============================================================
   CERISE BAKERY — Design Tokens
   cerisebakery.nl
   Brand guide: ezgiuslu.nl
   ============================================================ */

:root {

  /* --- COLORS --- */

  /* Brand palette */
  --color-bordeaux:    #3D1A1A;   /* Bordeaux Cherry · PANTONE 4975 C — primary */
  --color-mocha:       #644847;   /* Mocha Brown     · PANTONE 7616 C — secondary */
  --color-taupe:       #BDA8A8;   /* Dusty Taupe     · PANTONE 7613 C — accent */
  --color-cream:       #EEEBE6;   /* Primary Cream   · PANTONE 663 C  — background */

  /* Functional aliases */
  --color-bg:          var(--color-cream);
  --color-bg-dark:     var(--color-bordeaux);
  --color-text:        var(--color-bordeaux);
  --color-text-muted:  var(--color-mocha);
  --color-text-light:  var(--color-cream);
  --color-accent:      var(--color-taupe);
  --color-border:      var(--color-taupe);

  /* Overlays */
  --color-bordeaux-90: rgba(61, 26, 26, 0.90);
  --color-bordeaux-60: rgba(61, 26, 26, 0.60);
  --color-bordeaux-20: rgba(61, 26, 26, 0.20);
  --color-cream-80:    rgba(238, 235, 230, 0.80);


  /* --- TYPOGRAPHY --- */

  /* Fonts — load via Google Fonts in HTML:
     Cormorant Garamond: display headings (matches logo serif feel)
     Jost: body & UI (clean, modern, readable)                    */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:    'Jost', 'Helvetica Neue', sans-serif;

  /* Scale (fluid — clamp between mobile and desktop) */
  --text-xs:   clamp(0.70rem, 0.65rem + 0.2vw, 0.75rem);   /* 11–12px */
  --text-sm:   clamp(0.813rem, 0.75rem + 0.3vw, 0.875rem);  /* 13–14px */
  --text-base: clamp(0.938rem, 0.875rem + 0.3vw, 1rem);     /* 15–16px */
  --text-md:   clamp(1rem, 0.925rem + 0.4vw, 1.125rem);     /* 16–18px */
  --text-lg:   clamp(1.125rem, 1rem + 0.6vw, 1.375rem);     /* 18–22px */
  --text-xl:   clamp(1.375rem, 1.125rem + 1.2vw, 1.875rem); /* 22–30px */
  --text-2xl:  clamp(1.875rem, 1.375rem + 2.5vw, 3rem);     /* 30–48px */
  --text-3xl:  clamp(2.5rem,   1.75rem  + 3.5vw, 4.5rem);   /* 40–72px */

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.15em;
  --tracking-widest:  0.25em;

  /* Font weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;


  /* --- SPACING --- */

  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */


  /* --- LAYOUT --- */

  --container-sm:  640px;
  --container-md:  768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  --section-padding-y: clamp(var(--space-16), 8vw, var(--space-32));
  --section-padding-x: clamp(var(--space-6), 5vw, var(--space-16));


  /* --- BORDERS & RADIUS --- */

  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  --border-thin:   1px solid var(--color-border);
  --border-medium: 1.5px solid var(--color-bordeaux);


  /* --- SHADOWS --- */

  --shadow-sm:  0 1px 4px rgba(61, 26, 26, 0.08);
  --shadow-md:  0 4px 16px rgba(61, 26, 26, 0.12);
  --shadow-lg:  0 12px 40px rgba(61, 26, 26, 0.16);


  /* --- TRANSITIONS --- */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-enter:  600ms cubic-bezier(0.22, 1, 0.36, 1);
}