/* Olea Studio visual tokens
 * The site keeps the app's warm paper and sage character while using an
 * editorial type and spacing system for product marketing.
 * axes: paper-band light · display-style roman-serif · accent-hue chromatic-other (sage)
 */

:root {
  /* Surfaces */
  --color-paper:       #f8f6f1;
  --color-paper-sunk:  #eeeae2;
  --color-card:        #fcfbf8;
  --color-card-edge:   #ded9d0;
  --color-control-edge: #9d9890;

  /* Ink */
  --color-ink:         #2b2925;
  --color-ink-2:       #706b64;
  --color-ink-3:       #817b73;

  /* Accent — sage */
  --color-accent:      #829b65;
  --color-accent-deep: #557443;
  --color-accent-wash: #e8eee1;
  --color-accent-ink:  #fcfbf8;

  /* Rebuild — amber */
  --color-amber:       #af8954;
  --color-amber-deep:  #6f5135;
  --color-amber-wash:  #f1eadc;

  /* Shadow: warm umber, never black on warm paper */
  --color-shadow-soft: rgba(48, 44, 39, 0.07);

  --color-focus:       #4f773a;

  /* Tiempos Headline is the intended licensed display face. The following
     editorial fallbacks preserve the hierarchy until its webfont is supplied. */
  --font-display: "Tiempos Headline", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-wordmark: "Tiempos Headline", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --text-display:   clamp(2.5rem, 5.5vw, 4.5rem);
  --text-display-s: clamp(2.125rem, 4vw, 3.25rem);
  --text-title:     clamp(1.45rem, 2.4vw, 2rem);
  --text-lead:      clamp(1.125rem, 1.8vw, 1.3125rem);
  --text-body:      1.0625rem;
  --text-small:     0.9375rem;
  --text-micro:     0.6875rem;

  /* Space — Space.swift, 4pt scale */
  --space-hair:  2px;
  --space-tight: 4px;
  --space-snug:  8px;
  --space-cozy:  12px;
  --space-base:  16px;
  --space-roomy: 20px;
  --space-wide:  24px;
  --space-section: 32px;
  --space-major: 40px;
  --space-hero:  56px;
  --space-vast:  72px;
  --space-3xl:   clamp(72px, 12vw, 140px);

  /* Radius — exactly three, plus capsule */
  --radius-small: 12px;
  --radius-card:  22px;
  --radius-sheet: 34px;
  --radius-pill:  999px;

  --rule-hair: 0.5px solid var(--color-card-edge);
  --rule-control: 1px solid var(--color-control-edge);

  /* Motion — Motion.swift: one spring family, damping 1.0 (no overshoot) */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro:  120ms;
  --dur-quick:  220ms;
  --dur-settle: 420ms;
  --dur-gentle: 500ms;

  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
}

/* Preserve the intended perceptual palette in modern browsers while keeping
   the complete site legible in Safari versions that predate OKLCH support. */
@supports (color: oklch(50% 0.1 120)) {
  :root {
    --color-paper:       oklch(97% 0.008 75);
    --color-paper-sunk:  oklch(94% 0.011 75);
    --color-card:        oklch(99% 0.006 75);
    --color-card-edge:   oklch(89% 0.012 75);
    --color-control-edge: oklch(65% 0.012 65);
    --color-ink:         oklch(25% 0.012 65);
    --color-ink-2:       oklch(48% 0.014 65);
    --color-ink-3:       oklch(54% 0.012 65);
    --color-accent:      oklch(62% 0.10 135);
    --color-accent-deep: oklch(47% 0.09 135);
    --color-accent-wash: oklch(93% 0.025 135);
    --color-accent-ink:  oklch(99% 0.006 75);
    --color-amber:       oklch(67% 0.10 75);
    --color-amber-deep:  oklch(44% 0.08 70);
    --color-amber-wash:  oklch(94% 0.025 75);
    --color-shadow-soft: oklch(30% 0.014 65 / 0.07);
    --color-focus:       oklch(47% 0.13 135);
  }
}

/* Light only, deliberately. No dark palette is shipped. */