/* ==========================================================================
   KADRI ORGANICS — PREMIUM DESIGN TOKENS
   Palette is constrained to the client's existing brand colors
   (orange / black / white), refined for a premium register.
   ========================================================================== */

:root {
  /* ---- Color: refined from orange/black/white brief ----
     Recalibrated against real Kadri packaging (Hair Food marigold lid,
     Moulding Gel Wax burnt-copper lid, Curling Mousse amber-gold liquid).
     Orange now reads as a true brand color, not a thin accent. ---- */
  --color-ink: #0E0D0C;          /* near-black, warm undertone — primary text & dark sections */
  --color-ink-soft: #3A2A1E;     /* deep umber-brown — secondary text, borders on light bg */
  --color-paper: #FAF6F0;        /* warm ivory — primary light background, replaces stark white */
  --color-paper-raised: #F1EAE0; /* slightly deeper warm stone — cards, dividers */
  --color-stone: #E8DFD2;        /* border / hairline color on light backgrounds */
  --color-amber: #E8821B;        /* true marigold-orange, matched to packaging — primary brand color */
  --color-amber-dark: #C2650F;   /* burnt-copper — hover/active state, echoes Moulding Gel Wax lid */
  --color-amber-tint: #FBE4C8;   /* light marigold wash for badges/highlights/backgrounds */
  --color-gold-line: #C9A24B;  /* foil-gold hairline, matched to label gold rules */
  --color-kadri: #f85813;    /* offiial color of the company */

  /* ---- Type ---- */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-eyebrow: 0.72rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2.25rem;
  --fs-2xl: 3.25rem;
  --fs-3xl: 4.5rem;

  --tracking-eyebrow: 0.18em;
  --tracking-wide: 0.04em;

  /* ---- Spacing scale ---- */
  --space-2xs: 0.4rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.5rem;
  --space-xl: 5.5rem;
  --space-2xl: 8rem;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --border-hairline: 1px solid var(--color-stone);
  --border-hairline-dark: 1px solid rgba(250, 246, 240, 0.16);

  /* ---- Motion ---- */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-base: 420ms;
  --duration-slow: 900ms;
}

/* Tablet — tighten the largest spacing steps and bring down the top type sizes */
@media (max-width: 860px) {
  :root {
    --space-lg:  2.5rem;   /* was 3.5rem */
    --space-xl:  3.5rem;   /* was 5.5rem */
    --space-2xl: 5rem;     /* was 8rem   */
    --fs-2xl:    2.4rem;   /* was 3.25rem */
    --fs-3xl:    3rem;     /* was 4.5rem  */
  }
}

/* Small phone — container breathes less, type stays readable but compact */
@media (max-width: 480px) {
  :root {
    --space-lg:  1.75rem;  /* was 3.5rem  */
    --space-xl:  2.5rem;   /* was 5.5rem  */
    --space-2xl: 3.5rem;   /* was 8rem    */
    --fs-lg:     1.25rem;  /* was 1.5rem  */
    --fs-xl:     1.6rem;   /* was 2.25rem */
    --fs-2xl:    1.85rem;  /* was 3.25rem */
  }
}

/* Narrow phone — everything above this still assumes ~390px+ of width (iPhone
   16 Pro Max is 430px, S20 Ultra is 412px). A 360px screen like the Galaxy S8+
   renders the exact same sizes with noticeably less room, so text reads bigger
   and wraps more. One more step down for genuinely narrow screens only. */
@media (max-width: 390px) {
  :root {
    --fs-eyebrow: 0.66rem;  /* was 0.72rem */
    --fs-sm:      0.82rem;  /* was 0.875rem */
    --fs-base:    0.93rem;  /* was 1rem    */
    --fs-md:      1.05rem;  /* was 1.125rem */
    --fs-lg:      1.15rem;  /* was 1.25rem */
    --fs-xl:      1.45rem;  /* was 1.6rem  */
    --fs-2xl:     1.65rem;  /* was 1.85rem */
  }
}