/* ============================================================================
   Aroma — design tokens (extends the :root set in ../aroma.css)
   Semantic colors, neutral scale, spacing rhythm, radius/shadow tiers, motion
   timing, and the fluid type scale used by every component in this folder.
   ========================================================================== */

:root {
  /* Semantic colors — warm-toned so states never read as generic Bootstrap
     blue/green/red (Brand Guidelines: "Avoid generic Bootstrap colors"). */
  --aroma-success: #5b7a4a;
  --aroma-success-bg: #eef3e7;
  --aroma-danger: #a6432b;
  --aroma-danger-bg: #f7e9e4;
  --aroma-warning: #b8863c;
  --aroma-warning-bg: #fbf0de;
  --aroma-info: var(--aroma-brown);
  --aroma-info-bg: var(--aroma-skin);

  /* Neutral scale — warm-tinted grays derived from the ink color, used for
     borders, muted text, and disabled states instead of Bootstrap's cool grays. */
  --aroma-border: #e7dccc;
  --aroma-border-strong: #d8c7ae;
  --aroma-muted: #8a7c68;
  --aroma-disabled-bg: #f2eae0;
  --aroma-disabled-text: #b8aa97;

  /* Spacing rhythm — used for consistent section-level vertical rhythm
     instead of ad hoc mt-4 / mt-5 utility classes. */
  --aroma-space-xs: 0.5rem;
  --aroma-space-sm: 1rem;
  --aroma-space-md: 1.75rem;
  --aroma-space-lg: clamp(2.5rem, 5vw, 4rem);
  --aroma-space-xl: clamp(4rem, 8vw, 6rem);

  /* Radius tiers — --aroma-radius (0.85rem, defined in aroma.css) is the
     default/medium tier used by cards. */
  --aroma-radius-sm: 0.5rem;
  --aroma-radius-lg: 1.25rem;

  /* Shadow tiers — --aroma-shadow (defined in aroma.css) is the resting
     elevated tier. Kept soft and diffused per the brand's "minimal shadows"
     direction — never a hard, dark drop shadow. */
  --aroma-shadow-sm: 0 2px 10px rgba(112, 79, 47, 0.08);
  --aroma-shadow-lg: 0 20px 50px rgba(112, 79, 47, 0.18);

  /* Motion — one easing curve, three durations, reused by every
     hover/interaction effect across the component library. */
  --aroma-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --aroma-transition-fast: 150ms var(--aroma-ease);
  --aroma-transition: 250ms var(--aroma-ease);
  --aroma-transition-slow: 400ms var(--aroma-ease);

  /* Fluid type scale */
  --aroma-fs-display: clamp(2.75rem, 6vw, 4.5rem);
  --aroma-fs-h1: clamp(2.25rem, 4.5vw, 3.25rem);
  --aroma-fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --aroma-fs-h3: clamp(1.4rem, 2.2vw, 1.85rem);
  --aroma-fs-h4: 1.25rem;
  --aroma-fs-h5: 1.05rem;
  --aroma-fs-body: 1rem;
  --aroma-fs-small: 0.875rem;
  --aroma-fs-caption: 0.75rem;
}

/* --- Typography hierarchy --------------------------------------------------- */
body {
  font-size: var(--aroma-fs-body);
  line-height: 1.7;
}
h1 { font-size: var(--aroma-fs-h1); font-weight: 700; line-height: 1.15; }
h2 { font-size: var(--aroma-fs-h2); font-weight: 700; line-height: 1.2; }
h3 { font-size: var(--aroma-fs-h3); font-weight: 600; line-height: 1.25; }
h4 { font-size: var(--aroma-fs-h4); font-weight: 600; line-height: 1.3; }
h5 { font-size: var(--aroma-fs-h5); font-weight: 600; line-height: 1.35; }
h6 { font-size: var(--aroma-fs-body); font-weight: 600; }

.aroma-display {
  font-family: var(--aroma-heading-en);
  font-size: var(--aroma-fs-display);
  font-weight: 800;
  line-height: 1.05;
  color: var(--aroma-brown);
}
html[lang="ar"] .aroma-display { font-family: var(--aroma-heading-ar); }

.aroma-caption,
small {
  font-size: var(--aroma-fs-small);
}
.aroma-eyebrow {
  font-size: var(--aroma-fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--aroma-light-brown);
}

.text-aroma-muted { color: var(--aroma-muted) !important; }
.text-aroma-brown { color: var(--aroma-brown) !important; }
.text-aroma-light-brown { color: var(--aroma-light-brown) !important; }
.text-aroma-ink { color: var(--aroma-ink) !important; }
.aroma-icon-xl { font-size: 5rem; }

/* --- Section rhythm — replaces ad hoc mt-4/mt-5 utility spacing ---------------- */
.aroma-section { margin-top: var(--aroma-space-xl); }
.aroma-section-sm { margin-top: var(--aroma-space-lg); }