@font-face { font-family: 'Nunito'; src: url('/fonts/Nunito-Variable.ttf') format('truetype'); font-weight: 200 1000; font-style: normal; font-display: swap; }
/* ============ LAYER 1: colour primitives ============ */
:root {
  /* Aki — orange / fennec (default) */
  --pal-orange: #FF7A1A;
  --pal-orange-deep: #E8620A;
  --pal-cream: #FFF6EC;
  --pal-paper: #FFFDF8;
  --pal-sand: #F4E3D0;
  --pal-sand-deep: #E9D2B6;
  --pal-peach: #FFB877;
  --pal-ink: #3A2A1C;
  --pal-ink-soft: #7A6450;
  --pal-ink-faint: #A88E76;

  /* Rabbi — yellow / bunny */
  --pal-yellow: #F2C230;
  --pal-yellow-deep: #D9A516;
  --pal-yellow-cream: #FFFBEC;
  --pal-yellow-sand: #F3E9CC;
  --pal-yellow-ink: #3A331C;

  /* shared status */
  --pal-green: #3FA66A;
  --pal-amber: #E0A52E;
  --pal-red: #D8503C;
  --pal-violet: #6E5DA8;
  --pal-violet-bg: #EFEAF8;

  /* platform tints (theme-independent) */
  --plat-youtube: #E5544A;
  --plat-shorts: #E5544A;
  --plat-tiktok: #2B2B2B;
  --plat-instagram: #C64FA0;
  --plat-twitch: #8A5CD6;
  --plat-x: #2B2B2B;
  --plat-other: #8A7560;
}

/* ============ LAYER 2: semantic — components consume ONLY these ============ */
/* House no-flash fallback. web/js/branding.js emits equivalent registry-driven
   theme variables at runtime, plus any non-house tenant themes. */
:root,
html[data-theme='aki'] {
  --c-bg: var(--pal-cream);
  --c-surface: var(--pal-paper);
  --c-surface-2: var(--pal-sand);
  --c-ink: var(--pal-ink);
  --c-ink-soft: var(--pal-ink-soft);
  --c-ink-faint: var(--pal-ink-faint);
  --c-line: #ECD9BF;
  --c-accent: var(--pal-orange);
  --c-accent-deep: var(--pal-orange-deep);
  --c-accent-ink: #FFFFFF;
  --c-accent-soft: #FFE6CD;
  --c-pop: var(--pal-peach);
  --c-ok: var(--pal-green);
  --c-warn: var(--pal-amber);
  --c-danger: var(--pal-red);
  --c-focus: #2F6FB8;
  --c-shadow: #E9D2B6;
  --c-overlay: rgba(58, 42, 28, 0.46);
  --c-lock: var(--pal-violet);
  --c-lock-bg: var(--pal-violet-bg);

  /* fennec mark fill */
  --fennec-fur: var(--pal-cream);
  --fennec-line: var(--pal-orange-deep);
  --fennec-snout: var(--pal-peach);

  /* chat senders */
  --who-self: #FFE6CD;
  --who-self-ink: var(--pal-ink);
  --who-tonton: var(--pal-paper);
  --who-tonton-ink: var(--pal-ink);

  --pattern-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='3' cy='3' r='2' fill='%23F0DCC0'/%3E%3C/svg%3E");
}

/* ============ theme: rabbi — yellow / bunny ============ */
html[data-theme='rabbi'] {
  --c-bg: var(--pal-yellow-cream);
  --c-surface: #FFFEF9;
  --c-surface-2: var(--pal-yellow-sand);
  --c-ink: var(--pal-yellow-ink);
  --c-ink-soft: #6F6638;
  --c-ink-faint: #A39A66;
  --c-line: #EDE0BC;
  --c-accent: var(--pal-yellow);
  --c-accent-deep: var(--pal-yellow-deep);
  --c-accent-ink: #3A331C;
  --c-accent-soft: #FBEFC2;
  --c-pop: #FBE08A;
  --c-shadow: #ECDDA8;
  --c-overlay: rgba(58, 51, 28, 0.46);

  --fennec-fur: var(--pal-yellow-cream);
  --fennec-line: var(--pal-yellow-deep);
  --fennec-snout: #FBE08A;

  --who-self: #FBEFC2;
  --who-self-ink: var(--pal-yellow-ink);
  --who-tonton: #FFFEF9;
  --who-tonton-ink: var(--pal-yellow-ink);

  --pattern-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='3' cy='3' r='2' fill='%23ECDDA8'/%3E%3C/svg%3E");
}

/* ============ shared scale tokens ============ */
:root {
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --r-wonky: 18px 22px 16px 24px;
  --r-wonky-2: 22px 16px 24px 18px;
  --r-bubble-own: 18px 18px 6px 18px;
  --r-bubble-other: 18px 18px 18px 6px;

  --bw-thin: 1.5px;
  --bw-sticker: 2.5px;
  --bw-chunky: 3px;
  --shadow-pop: 0 3px 0 var(--c-shadow);
  --shadow-card: 0 4px 0 var(--c-shadow);
  --shadow-float: 0 10px 24px rgba(58, 42, 28, 0.18);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 21px; --fs-2xl: 26px;
  --lh-tight: 1.2; --lh-body: 1.55;
  --font-display: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --weight-head: 700;

  --t-fast: 120ms;
  --t-pop: 200ms;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --tap-min: 44px;
  --topbar-h: 56px;
  --tabbar-h: 64px;
  --content-max: 680px;
  --rail-w: 220px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}