/* ============================================================
   Pebbii — design tokens

   Lifted from the Pebbii design system (the same token files the app and the
   Penpot library are generated from). Keep the values here in step with
   pebbii-docs/design-system rather than editing them to taste: anything the
   website needs on top of the system belongs in site.css, where it can carry a
   reason.

   The system is dark-first — :root is the shipped app appearance, and
   [data-theme="light"] re-points the same semantic names. The website runs in
   light; the app itself appears only as screenshots.
   ============================================================ */

/* ── Typeface ─────────────────────────────────────────────────
   Satoshi is the brand's only face. The variable file covers the whole
   300–900 axis, which is how Semibold 600 is reached — Satoshi ships no static
   Semibold, and the type guide asks for 600 on headline medium, small and the
   overline. The statics stay as a fallback family for anything that cannot load
   a variable font. */
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Variable.woff2') format('woff2-variations'),
       url('../fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi Static';
  src: url('../fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi Static';
  src: url('../fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi Static';
  src: url('../fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi Static';
  src: url('../fonts/Satoshi-Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ── Palette ──────────────────────────────────────────────── */
:root {
  /* Primary */
  --pebbii-primary: #3D5A4C;        /* main background (dark) */
  --pebbii-primary-dark: #2D4639;   /* text on cream, shadows */
  --pebbii-primary-deep: #1E3026;   /* max contrast, headings */
  --pebbii-secondary: #5A7A68;      /* gradients, toolbar */

  /* Card & surface */
  --pebbii-card-background: #4A6B5A;
  --pebbii-card-bg-light: #5A7A68;
  --pebbii-light-background: #F5F8F6;
  --pebbii-surface-light: #E8F0EB;

  /* Accent (cool) */
  --pebbii-accent: #8FB09D;
  --pebbii-accent-light: #B5D4C3;
  --pebbii-accent-very-light: #D4E8DC;
  --pebbii-text-muted-light: #7A9485;

  /* Warm accent */
  --pebbii-cream: #E6D29F;
  --pebbii-terracotta: #C17F59;
  --pebbii-peach: #F4C4A0;
  --pebbii-peach-light: #F8E4C4;

  /* Illustration palette */
  --pebbii-sage-green: #85A392;
  --pebbii-dark-teal: #1A4A48;
  --pebbii-white: #FFFFFF;
  --pebbii-text-dark: #1E3026;

  /* Semantic: surfaces (dark, as the app ships) */
  --surface-app: var(--pebbii-primary);
  --surface-raised: var(--pebbii-card-background);
  --surface-card: var(--pebbii-secondary);
  --surface-chip: #738E7F;
  --surface-scrim: rgba(0,0,0,.4);

  /* Semantic: text */
  --text-primary: var(--pebbii-white);
  --text-secondary: rgba(255,255,255,.85);
  --text-muted: rgba(255,255,255,.55);
  --text-on-accent: var(--pebbii-primary-dark);
  --text-accent: var(--pebbii-cream);
  --text-eyebrow: var(--pebbii-accent);

  /* Semantic: accent & state */
  --accent: var(--pebbii-cream);
  --accent-ink: var(--pebbii-primary-dark);
  --accent-cool: var(--pebbii-accent);
  --danger: var(--pebbii-terracotta);
  --indicator: var(--pebbii-accent);
  --avatar-fill: #96AF9F;

  /* Semantic: lines */
  --border-hairline: rgba(255,255,255,.20);
  --border-dashed: rgba(255,255,255,.34);
  --border-strong: var(--pebbii-white);
}

/* Light mode. The style guide specifies it; the app has not built it yet, and
   the website is the first thing to run in it.

   Two values deviate from the system on purpose, both for contrast on a
   near-white page. --text-muted is the guide's #7A9485, which reads at 3.1:1
   on the page and 2.8:1 on the tinted band — under AA for the caption sizes it
   is used at here. --text-eyebrow would be --pebbii-accent at 2.2:1, which is
   worse. Both are darkened to the nearest brand green that clears 4.5:1
   everywhere they appear. The app's own light mode should make the same call
   when it gets built. */
[data-theme="light"] {
  --surface-app: var(--pebbii-light-background);
  --surface-raised: var(--pebbii-white);
  --surface-card: var(--pebbii-surface-light);
  --surface-chip: var(--pebbii-accent-very-light);

  --text-primary: var(--pebbii-primary-deep);
  --text-secondary: var(--pebbii-primary);
  --text-muted: #54725F;
  --text-on-accent: var(--pebbii-white);
  --text-accent: var(--pebbii-primary);
  --text-eyebrow: #4A635C;

  --accent: var(--pebbii-primary);
  --accent-ink: var(--pebbii-white);
  --indicator: var(--pebbii-primary);
  --avatar-fill: var(--pebbii-accent);

  --border-hairline: rgba(30,48,38,.12);
  --border-dashed: rgba(30,48,38,.28);
  --border-strong: var(--pebbii-primary-deep);
}

/* ── Type ramp ────────────────────────────────────────────── */
:root {
  --font-sans: 'Satoshi', 'Satoshi Static', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;  /* variable axis only — no static Satoshi Semibold */
  --weight-bold: 700;
  --weight-black: 900;

  --text-display: 32px;
  --text-headline-lg: 24px;
  --text-headline-md: 20px;
  --text-headline-sm: 17px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-overline: 11px;

  --leading-display: 40px;
  --leading-headline-lg: 32px;
  --leading-headline-md: 28px;
  --leading-headline-sm: 24px;
  --leading-body: 24px;
  --leading-body-sm: 20px;
  --leading-caption: 16px;

  --tracking-overline: 1px;

  --type-display: var(--weight-bold) var(--text-display)/var(--leading-display) var(--font-sans);
  --type-headline-lg: var(--weight-bold) var(--text-headline-lg)/var(--leading-headline-lg) var(--font-sans);
  --type-headline-md: var(--weight-semibold) var(--text-headline-md)/var(--leading-headline-md) var(--font-sans);
  --type-headline-sm: var(--weight-semibold) var(--text-headline-sm)/var(--leading-headline-sm) var(--font-sans);
  --type-body: var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-sans);
  --type-body-sm: var(--weight-regular) var(--text-body-sm)/var(--leading-body-sm) var(--font-sans);
  --type-caption: var(--weight-regular) var(--text-caption)/var(--leading-caption) var(--font-sans);
  --type-overline: var(--weight-semibold) var(--text-overline)/var(--leading-caption) var(--font-sans);
}

/* ── Radii ────────────────────────────────────────────────────
   Pebbii rounds generously and never squares a container: 10px is the smallest
   radius anywhere in the app. */
:root {
  --radius-thumb: 10px;
  --radius-sm: 12px;
  --radius-field: 14px;
  --radius-card: 16px;
  --radius-button: 18px;
  --radius-lg: 20px;
  --radius-chip: 20px;
  --radius-pill: 30px;
  --radius-capsule: 999px;
  --radius-dialog: 28px;
}

/* ── Spacing & sizes ──────────────────────────────────────── */
:root {
  --gutter: 20px;
  --card-padding: 16px;
  --card-padding-loose: 20px;
  --touch-min: 44px;
  --control-height: 48px;
  --avatar-sm: 35px;
  --thumb-sm: 75px;
  --prompt-card-height: 180px;
}

/* ── Motion ───────────────────────────────────────────────── */
:root {
  --duration-fast: 200ms;
  --duration-base: 250ms;
  --ease-standard: cubic-bezier(.42, 0, .58, 1);
  --ease-out: cubic-bezier(0, 0, .58, 1);
  --ease-reveal: cubic-bezier(.16, .84, .44, 1);
}