/* ==========================================================================
   Maison Aurevia — design tokens
   Single source of truth for colour, type, space, radius, elevation, motion.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --brand:        #1B3BFF;   /* electric cobalt — primary action            */
  --brand-ink:    #1029C2;   /* pressed / link hover                        */
  --brand-deep:   #0B1A80;
  --brand-tint:   #EDF0FF;   /* wash behind brand content                   */
  --brand-tint-2: #DCE2FF;

  --ember:        #FF4E18;   /* vibrant warm accent (large text / fields)   */
  --ember-deep:   #C22F05;
  --ember-tint:   #FFEDE6;

  --saffron:      #FFB020;
  --saffron-deep: #8A5A00;
  --saffron-tint: #FFF4DF;

  --verde:        #0E9F6E;
  --verde-deep:   #05663F;
  --verde-tint:   #E4F7EF;

  --plum:         #7A2BE0;
  --plum-tint:    #F2EAFE;

  /* ---- Neutrals --------------------------------------------------------- */
  --ink:        #0B0D14;     /* headings, primary text                      */
  --ink-2:      #232838;     /* body text                                   */
  --muted:      #5A6176;     /* secondary text — 5.6:1 on --paper           */
  --muted-2:    #828A9E;     /* decorative only, never body copy            */

  --paper:      #FFFFFF;
  --canvas:     #F5F3EE;     /* warm page background                        */
  --canvas-2:   #EDEAE2;
  --line:       #E2DFD6;
  --line-2:     #CFCBBF;

  /* ---- Status ----------------------------------------------------------- */
  --ok:      #0E7A55;
  --ok-tint: #E4F7EF;
  --warn:      #97560A;
  --warn-tint: #FFF3E2;
  --danger:      #C4241A;
  --danger-tint: #FDECEA;

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* Fluid scale. Min values are the 375px reading sizes. */
  --t-display: clamp(3rem, 1.6rem + 6.4vw, 7rem);
  --t-h1:      clamp(2.25rem, 1.45rem + 3.6vw, 4.5rem);
  --t-h2:      clamp(1.75rem, 1.28rem + 2.1vw, 3rem);
  --t-h3:      clamp(1.3125rem, 1.14rem + 0.78vw, 1.875rem);
  --t-h4:      clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --t-lead:    clamp(1.125rem, 1.03rem + 0.42vw, 1.375rem);
  --t-body:    1.0625rem;
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-eyebrow: 0.75rem;

  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-body:  1.65;

  --track-display: -0.035em;
  --track-head:    -0.022em;
  --track-eyebrow:  0.16em;

  /* ---- Space (4px rhythm) ----------------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.5rem;
  --s-8:  3rem;
  --s-9:  4rem;
  --s-10: 5rem;
  --s-11: 6.5rem;
  --s-12: 8rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --gutter:    clamp(1.125rem, 0.4rem + 2.6vw, 3.5rem);
  --maxw:      84rem;   /* 1344px */
  --maxw-text: 44rem;

  /* ---- Radius ----------------------------------------------------------- */
  --r-xs:   6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  34px;
  --r-pill: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  --e-1: 0 1px 2px rgba(11, 13, 20, .05), 0 1px 1px rgba(11, 13, 20, .04);
  --e-2: 0 2px 5px rgba(11, 13, 20, .06), 0 6px 16px rgba(11, 13, 20, .05);
  --e-3: 0 4px 10px rgba(11, 13, 20, .07), 0 18px 38px rgba(11, 13, 20, .08);
  --e-4: 0 8px 20px rgba(11, 13, 20, .10), 0 34px 70px rgba(11, 13, 20, .12);
  --e-brand: 0 10px 28px rgba(27, 59, 255, .26);

  /* ---- Motion ----------------------------------------------------------- */
  --dur-1: 120ms;   /* state flick: hover, press                            */
  --dur-2: 200ms;   /* small element enter                                  */
  --dur-3: 320ms;   /* panel / drawer                                       */
  --dur-4: 560ms;   /* scroll reveal over distance                          */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in:   cubic-bezier(.55, 0, 1, .45);

  /* ---- Layers ----------------------------------------------------------- */
  --z-base:    0;
  --z-raised: 10;
  --z-sticky: 40;
  --z-header: 60;
  --z-drawer: 80;
  --z-modal: 100;
  --z-toast: 120;

  --header-h: 68px;
}

@media (min-width: 1024px) {
  :root { --header-h: 82px; }
}

/* Category accent hooks — set on any element with data-accent */
[data-accent="brand"]   { --accent: var(--brand);   --accent-tint: var(--brand-tint);   --accent-deep: var(--brand-ink); }
[data-accent="ember"]   { --accent: var(--ember);   --accent-tint: var(--ember-tint);   --accent-deep: var(--ember-deep); }
[data-accent="saffron"] { --accent: var(--saffron); --accent-tint: var(--saffron-tint); --accent-deep: var(--saffron-deep); }
[data-accent="verde"]   { --accent: var(--verde);   --accent-tint: var(--verde-tint);   --accent-deep: var(--verde-deep); }
[data-accent="plum"]    { --accent: var(--plum);    --accent-tint: var(--plum-tint);    --accent-deep: #4C1799; }