/* =========================================================================
   Retainly · Direction A — "Atmosphere"
   Calm, ambient, emotional. Headspace + Oura DNA.
   Warm coral/cream world, soft serif display, contextual gradients.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,400..700,0..100,0..1;1,9..144,400..700,0..100,0..1&family=Inter:wght@400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&family=Instrument+Serif:ital,wght@0,400;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400..700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ----- Coral primary ramp ----- */
  --a-coral-50:  #fff5f1;
  --a-coral-100: #ffe5da;
  --a-coral-200: #ffc9b3;
  --a-coral-300: #ffa888;
  --a-coral-400: #ff8762;
  --a-coral-500: #f06a47;   /* primary */
  --a-coral-600: #d54f30;
  --a-coral-700: #a83b22;
  --a-coral-800: #732818;
  --a-coral-900: #3f1610;

  /* ----- Ink (warm navy) ----- */
  --a-ink-50:  #f7f4f0;
  --a-ink-100: #e8e1d6;
  --a-ink-200: #c8bdaa;
  --a-ink-300: #948775;
  --a-ink-400: #5d5343;
  --a-ink-500: #3a3328;
  --a-ink-600: #28231b;
  --a-ink-700: #1c1813;
  --a-ink-800: #110e0a;
  --a-ink-900: #080705;

  /* ----- Cream (paper background) ----- */
  --a-cream-50:  #fffdfa;
  --a-cream-100: #fbf6ee;
  --a-cream-200: #f4ecde;
  --a-cream-300: #ebdcc4;

  /* ----- Accents ----- */
  --a-sage-500:  #6b8e6b;   /* progress / success */
  --a-amber-500: #e8a14a;   /* attention */
  --a-rose-500:  #c44a6b;   /* alert */
  --a-sky-500:   #6b8aae;   /* info / link */

  /* ----- Semantic ----- */
  --a-bg: var(--a-cream-100);
  --a-bg-elev: var(--a-cream-50);
  --a-fg: var(--a-ink-700);
  --a-fg-mute: var(--a-ink-400);
  --a-fg-soft: var(--a-ink-300);
  --a-border: rgba(58, 51, 40, 0.08);
  --a-border-strong: rgba(58, 51, 40, 0.16);
  --a-primary: var(--a-coral-500);
  --a-primary-deep: var(--a-coral-700);

  /* ----- Type scale ----- */
  --a-font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --a-font-sans: 'Inter', -apple-system, system-ui, sans-serif;
  --a-font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  --a-r-sm: 10px;
  --a-r-md: 18px;
  --a-r-lg: 28px;
  --a-r-xl: 40px;
  --a-r-pill: 999px;

  --a-shadow-sm: 0 1px 2px rgba(60,40,20,0.04), 0 2px 6px rgba(60,40,20,0.04);
  --a-shadow-md: 0 4px 14px rgba(60,40,20,0.08), 0 2px 4px rgba(60,40,20,0.04);
  --a-shadow-lg: 0 18px 40px rgba(60,40,20,0.12), 0 6px 14px rgba(60,40,20,0.06);
  --a-shadow-warm: 0 24px 60px -10px rgba(240,106,71,0.32);
}

/* ----- Ambient gradient world (Direction A signature) ----- */
.a-ambient {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, #ffd9c6 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 30%, #ffe9a8 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% 100%, #f9c3b0 0%, transparent 50%),
    var(--a-cream-100);
}
.a-ambient-dusk {
  background:
    radial-gradient(ellipse 70% 50% at 80% 20%, #f9b6a8 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 10% 90%, #c89bb6 0%, transparent 60%),
    linear-gradient(180deg, #ffe9d9 0%, #f5d9c8 100%);
}
.a-ambient-deep {
  background:
    radial-gradient(ellipse 70% 50% at 20% 20%, rgba(240,106,71,0.40) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 80%, rgba(107,138,174,0.30) 0%, transparent 55%),
    var(--a-ink-700);
  color: var(--a-cream-100);
}

/* type primitives */
/* Global Fraunces tuning — turn off the wonky swashes on f/g/y/r descenders,
   soften the terminals slightly. Inter and JetBrains Mono ignore these axes.
   Applied at body AND universal selector so React inline `style={{fontStyle:'italic'}}`
   elements pick it up too. */
body, body * { font-variation-settings: 'WONK' 0, 'SOFT' 40; }
.a-display { font-family: var(--a-font-display); font-weight: 500; letter-spacing: -0.02em; font-variation-settings: 'WONK' 0, 'SOFT' 40; }
.a-sans { font-family: var(--a-font-sans); }
.a-mono { font-family: var(--a-font-mono); }