/* ============================================================
   APRICUS — Design System Foundations
   Colors + Typography tokens
   "Apricus" (Latin): warmed by the sun, sun-loving.
   Vibe: dolce vita · citron · Provence / Toscana · feminine wellness
   ------------------------------------------------------------
   Fonts are USER-SUPPLIED (self-hosted in /fonts, see fonts.css):
     - Compote        (display serif vintage — titres, styles mélangés)
     - Juturu         (body / UI sans)
     - Sunset Script  (accent manuscrit, ex. « la dolce vita »)
     - Burra · Groovezilla (gros accents — réserve)
   No external font CDN needed — fonts.css @font-face does it all.
   ============================================================ */

@import url('fonts.css');

:root {
  /* ---------- RAW PALETTE ---------------------------------- */
  /* Sun / Citron — primary */
  --apr-citron:       #F4C20D;  /* primary sun yellow / lemon zest      */
  --apr-citron-soft:  #F9D862;  /* light wash, highlights, hovers on dark */
  --apr-citron-pale:  #FBEFC2;  /* tints, chips, soft fills             */
  --apr-zest:         #E09600;  /* deeper amber — pressed/active, on light */
  --apr-honey:        #C8821B;  /* dark amber for text-on-cream emphasis */
  --apr-lemon:        #F5E226;  /* LOGO yellow — bright lemon (mark only) */
  --apr-lemon-rind:   #FAD11B;  /* LOGO rind highlight                  */

  /* Grounds — limestone / linen / warm whites */
  --apr-cream:        #FBF4E6;  /* page background                      */
  --apr-cream-deep:   #F3E6CD;  /* alternating sections, sand           */
  --apr-linen:        #FFFDF8;  /* warm white — cards/surfaces          */
  --apr-shell:        #F7EFDF;  /* subtle surface tint                  */

  /* Foliage — lemon leaf / olive */
  --apr-olive:        #6F7A45;  /* secondary — leaves, stems            */
  --apr-olive-deep:   #4E5630;  /* deep foliage, text on light          */
  --apr-sage:         #AFB78C;  /* muted foliage tint                   */

  /* Earth — Tuscan terracotta / clay */
  --apr-terracotta:   #C06A47;  /* warm accent, links, tags             */
  --apr-clay:         #9E4E30;  /* deep clay                            */
  --apr-blush:        #E7C3AE;  /* soft warm tint                       */

  /* Sky — Mediterranean azure (used sparingly) */
  --apr-sky:          #8FB1C0;  /* soft sea/sky accent                  */
  --apr-sky-deep:     #5B8190;

  /* Ink — warm near-blacks & greys */
  --apr-ink:          #322D1E;  /* primary text — warm charcoal         */
  --apr-ink-soft:     #6A6350;  /* secondary text                       */
  --apr-ink-faint:    #9A9279;  /* tertiary / captions / placeholder    */
  --apr-line:         #E5D9C2;  /* hairlines, borders on cream          */
  --apr-line-strong:  #D6C6A6;

  /* Status (kept warm/botanical, used rarely) */
  --apr-success:      #6F7A45;  /* olive doubles as positive            */
  --apr-warning:      #E09600;
  --apr-danger:       #B5462B;

  /* ---------- SEMANTIC: SURFACES & TEXT -------------------- */
  --bg:               var(--apr-cream);
  --bg-alt:           var(--apr-cream-deep);
  --surface:          var(--apr-linen);
  --surface-tint:     var(--apr-shell);

  --fg1:              var(--apr-ink);        /* primary text   */
  --fg2:              var(--apr-ink-soft);   /* secondary text */
  --fg3:              var(--apr-ink-faint);  /* tertiary text  */
  --fg-on-citron:     var(--apr-ink);        /* text on yellow */
  --fg-on-dark:       var(--apr-cream);      /* text on olive/clay/ink */

  --primary:          var(--apr-citron);
  --primary-hover:    #F6CC33;
  --primary-press:    var(--apr-zest);
  --on-primary:       var(--apr-ink);

  --accent-olive:     var(--apr-olive);
  --accent-terra:     var(--apr-terracotta);
  --accent-sky:       var(--apr-sky);

  --border:           var(--apr-line);
  --border-strong:    var(--apr-line-strong);
  --ring:             color-mix(in oklab, var(--apr-zest) 55%, transparent);

  /* ---------- TYPOGRAPHY: FAMILIES ------------------------- */
  --font-display: "Compote", Georgia, "Times New Roman", serif;
  --font-body:    "Juturu", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-accent:  "Sunset Script", Georgia, serif;             /* handwritten accent */
  --font-script:  "Sunset Script", cursive;                     /* handwritten */
  --font-script-alt: "Oldport Script", cursive;                 /* handwritten, alt */
  --font-display-alt: "Burra", "Compote", serif;                /* psychedelic statement */
  --font-burra-expanded: "Burra Expanded", "Burra", serif;

  /* ---------- TYPE SCALE (fluid-ish, px) ------------------- */
  --text-xs:    13px;
  --text-sm:    15px;
  --text-base:  17px;
  --text-md:    19px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   64px;
  --text-5xl:   88px;
  --text-6xl:   120px;

  --leading-tight:  1.05;
  --leading-snug:   1.18;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-eyebrow:0.22em;  /* small-caps eyebrows / labels */

  /* ---------- SPACING (4pt base) --------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10:128px;
  --space-11:160px;

  /* ---------- RADII ---------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  34px;
  --radius-pill:999px;
  --radius-arch:50% 50% 0 0 / 90% 90% 0 0; /* Tuscan arch (top) */

  /* ---------- SHADOWS (warm, soft, sun-cast) --------------- */
  --shadow-xs:  0 1px 2px rgba(80, 60, 20, 0.06);
  --shadow-sm:  0 2px 8px rgba(90, 66, 22, 0.07);
  --shadow-md:  0 8px 24px rgba(90, 66, 22, 0.10);
  --shadow-lg:  0 18px 48px rgba(86, 62, 20, 0.14);
  --shadow-glow:0 8px 30px rgba(224, 150, 0, 0.22); /* citron glow */

  /* ---------- MOTION --------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:  cubic-bezier(0.33, 0.0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-mid:    260ms;
  --dur-slow:   480ms;
}

/* ============================================================
   ELEMENT DEFAULTS  (opt-in via .apr-prose or use the classes)
   ============================================================ */
.apr-root,
body.apr {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- HEADINGS / DISPLAY ---------- */
.apr-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
h1, .apr-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  margin: 0;
}
h2, .apr-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--fg1);
  margin: 0;
}
h3, .apr-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
  margin: 0;
}
h4, .apr-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg1);
  margin: 0;
}

/* Editorial italic accent (pull quotes, labels in serif italic) */
.apr-accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  color: var(--apr-honey);
}

/* Eyebrow / overline — small caps, tracked out */
.apr-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--apr-honey);
}

/* Body copy */
p, .apr-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg2);
  margin: 0 0 1em;
  text-wrap: pretty;
}
.apr-lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg1);
}

small, .apr-caption {
  font-size: var(--text-sm);
  color: var(--fg3);
}

a, .apr-link {
  color: var(--apr-terracotta);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .apr-link:hover {
  color: var(--apr-clay);
  text-decoration: underline;
}