/* Out Of Office — Design tokens
 * Ported from the Claude Design system "out-of-office-design-system".
 * Palette sampled from the disco-globe badge: warm, retro, golden-hour.
 */
:root {
  /* ---- Base palette ---- */
  --ooo-ink:      #16120E;  /* warm near-black — the badge field */
  --ooo-ink-soft: #2A241E;  /* raised ink surface */
  --ooo-cream:    #F5E7C6;  /* vanilla cream — the logotype letters */
  --ooo-cream-2:  #FBF3DF;  /* lighter paper */
  --ooo-paper:    #FDF8EC;  /* brightest paper */

  --ooo-orange:   #E8902B;  /* primary accent — golden hour */
  --ooo-gold:     #E9B24B;  /* warm highlight glow */
  --ooo-rust:     #C6402A;  /* hot red / rust */
  --ooo-teal:     #2E7A72;  /* cool counterpoint */
  --ooo-teal-deep:#1F5A54;
  --ooo-sky:      #C6D9DD;  /* pale backdrop blue */
  --ooo-sky-2:    #DCE9EB;

  /* neutral warm greys (tinted toward ink, never pure grey) */
  --ooo-grey-90: #2C2620;
  --ooo-grey-70: #4E463C;
  --ooo-grey-50: #7A7062;
  --ooo-grey-30: #B4A991;
  --ooo-grey-15: #E4D9BF;

  /* ---- Semantic aliases ---- */
  --surface-ink:    var(--ooo-ink);
  --surface-cream:  var(--ooo-cream);
  --surface-paper:  var(--ooo-paper);
  --text-on-ink:    var(--ooo-cream);
  --text-on-cream:  var(--ooo-ink);
  --text-body:      var(--ooo-grey-90);
  --text-muted:     var(--ooo-grey-50);

  --accent:         var(--ooo-orange);
  --accent-hover:   #D07E1E;
  --accent-press:   #B96E16;

  --border-ink:     var(--ooo-ink);
  --border-soft:    var(--ooo-grey-15);
  --focus-ring: color-mix(in srgb, var(--ooo-orange) 55%, transparent);

  /* ---- Typography ---- */
  --font-display: 'Bagel Fat One', 'Fredoka', system-ui, sans-serif; /* disco hero */
  --font-head:    'Fredoka', system-ui, sans-serif;                  /* headings / UI */
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* ---- Radii / borders / shadows ---- */
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-pill: 999px;
  --keyline: 2px solid var(--ooo-ink);
  --shadow-sticker:    4px 4px 0 var(--ooo-ink);
  --shadow-sticker-lg: 6px 6px 0 var(--ooo-ink);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}