/* Mirai Sekkai design tokens.
   Source: "Mirai Sekkai - logo guidelines.pdf" p.20 (Primary Palette).
   Note: the delivered logo artwork is filled #409104, which disagrees with
   the documented primary #2A9950. Following the written guidelines. */

@font-face {
  font-family: 'Parkinsans Local';
  src: url('../fonts/Parkinsans-Light.ttf') format('truetype');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'Manrope Local';
  src: url('../fonts/Manrope-ExtraLight.ttf') format('truetype');
  font-weight: 200; font-display: swap;
}
@font-face {
  font-family: 'Manrope Local';
  src: url('../fonts/Manrope-Light.ttf') format('truetype');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'Manrope Local';
  src: url('../fonts/Manrope-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}

:root {
  /* ---- Brand ---- */
  --green:       #2A9950;   /* Chloris Green      — primary   */
  --green-dark:  #1F7A3E;   /* derived, hover only            */
  --green-wash:  #EFF7F1;   /* derived, tint surfaces         */
  --dark:        #193138;   /* Midnight Botanica  — secondary */
  --dark-soft:   #24444C;   /* derived, dark hover            */
  --sage:        #91C4A1;   /* Soft Sage Mist     — tertiary  */
  --cream:       #F4F2EE;   /* page canvas                    */
  --sand:        #E2DEC9;   /* secondary surface              */
  --ink:         #0C0C0C;
  --white:       #FFFFFF;
  --mark:        url('/assets/brand/mark-reversed.svg'); /* lotus watermark, dark surfaces only */

  /* ---- Derived neutrals ---- */
  --line:        #ECE8DE;
  --line-strong: #DCD6C8;
  --muted:       #8B8B82;
  --muted-soft:  #B0ACA2;
  --sale:        #B23A2E;   /* discount only — never a brand colour */
  --sale-wash:   #FBEEEC;   /* derived, tint surfaces for discount/urgency accents */

  /* ---- Type ---- */
  --font-display: 'Parkinsans', 'Parkinsans Local', Georgia, serif;
  --font-body:    'Manrope', 'Manrope Local', system-ui, sans-serif;

  --step--2: 0.6875rem;   /* 11px  micro-labels     */
  --step--1: 0.78rem;     /* 12.5px meta            */
  --step-0:  0.875rem;    /* 14px   body            */
  --step-1:  1rem;        /* 16px   lead            */
  --step-2:  1.25rem;     /* 20px   sub-heading     */
  --step-3:  1.875rem;    /* 30px   section heading */
  --step-4:  2.75rem;     /* 44px   hero            */

  --tracking-label: .14em;

  /* ---- Space ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* ---- Form ---- */
  --radius:      10px;
  --radius-sm:   6px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ---- Depth. Deliberately shallow; this is a calm surface. ---- */
  --shadow-sm: 0 1px 2px rgba(25, 49, 56, .05);
  --shadow:    0 2px 10px rgba(25, 49, 56, .07);
  --shadow-lg: 0 18px 44px rgba(25, 49, 56, .16);

  /* ---- Motion ---- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --fast:      140ms;
  --normal:    240ms;
  --slow:      420ms;

  /* ---- Layout ---- */
  --shell:  1440px;
  --gutter: 56px;
  --header-h: 150px;

  /* ---- Stacking ---- */
  --z-mega:    60;
  --z-header:  50;
  --z-drawer:  80;
  --z-modal:   90;
}

@media (max-width: 1100px) { :root { --gutter: 32px; --step-4: 2.25rem; } }
@media (max-width: 760px)  { :root { --gutter: 20px; --step-3: 1.5rem; --step-4: 1.9rem; } }
@media (max-width: 460px)  { :root { --gutter: 16px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --fast: 0ms; --normal: 0ms; --slow: 0ms; }
}