/* Earful design tokens. Shared by the marketing site and the web app.
   Loud and flat: whole fields of flat colour, black ink, Roundo set heavy. */

@font-face { font-family: 'Roundo'; src: url('../fonts/roundo-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Roundo'; src: url('../fonts/roundo-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Roundo'; src: url('../fonts/roundo-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Roundo'; src: url('../fonts/roundo-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
  color-scheme: light dark;

  /* Raw palette */
  --pink-100: #ffc4ef;   /* ear pink: the brand ground */
  --pink-300: #f07ad3;
  --magenta: #f53fd6;    /* loud moments: the closing field, the unread dot */
  --pink-700: #c22a9f;
  --pink-800: #7a0f62;
  --pink-900: #3d0530;
  --cyan-100: #a4f6f8;
  --orange-300: #f9a21f;
  --black: #0a0a0a;
  --white: #ffffff;
  --grey-50: #f5f5f5;
  --grey-600: #5c5c5c;

  /* Roles */
  --bg: var(--white);
  --surface: var(--grey-50);        /* one tone step off the ground; no lines, no shadows */
  --ink: var(--black);
  --muted: var(--grey-600);         /* secondary notes only, never running text */
  --action: var(--black);           /* every primary button */
  --action-ink: var(--white);
  --action-hover: #2b2b2b;
  --focus: var(--magenta);

  /* Fields: each section owns one flat colour; type on it is the paired ink */
  --field-pink: var(--pink-100);    --field-pink-ink: var(--black);
  --field-cyan: var(--cyan-100);    --field-cyan-ink: var(--black);
  --field-orange: var(--orange-300); --field-orange-ink: var(--black);
  --field-loud: var(--magenta);     --field-loud-ink: var(--black);
  --field-dark: var(--black);       --field-dark-ink: var(--white);

  /* Stages, dark to light, for anything ordered */
  --stage-1: var(--pink-900); --stage-1-ink: var(--white);
  --stage-2: var(--pink-800); --stage-2-ink: var(--white);
  --stage-3: var(--pink-700); --stage-3-ink: var(--white);
  --stage-4: var(--pink-300); --stage-4-ink: var(--black);
  --stage-5: var(--pink-100); --stage-5-ink: var(--black);

  /* App status (the app uses these; the site barely does) */
  --star: var(--orange-300);
  --ok: #0b7a43;   --ok-bg: #d5f5e3;
  --warn: #8a5300; --warn-bg: #ffe8c2;
  --bad: #c0183a;  --bad-bg: #ffd9e0;
  --unread: var(--magenta);

  /* Type: one family, five steps (plus the giant specimen size the landing page uses once) */
  --font: 'Roundo', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --weight-text: 400;
  --weight-strong: 700;
  --weight-display: 900;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);   /* 13–14px */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);     /* 17–19px */
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);       /* 20–26px */
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);              /* 32–64px */
  --step-display: clamp(4rem, 11.4vw, 11rem);                  /* 64–176px */
  --step-title: clamp(2.5rem, 7vw, 6.5rem);                   /* section titles that shout */
  --step-giant: clamp(7rem, 21vw, 21rem);                   /* price specimens only */
  --leading-display: 0.88;
  --leading-head: 1.02;
  --leading-text: 1.5;
  --tracking-display: -0.035em;
  --tracking-head: -0.025em;

  /* Space: 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 1.75rem);   /* page margin: 16px phone, 28px desktop */
  --section-gap: clamp(5rem, 3rem + 8vw, 10rem);
  --measure: 36rem;

  /* Shape: one radius for panels, buttons are full pills */
  --radius: 28px;
  --radius-small: 12px;   /* app inputs and chips */
  --radius-pill: 999px;

  /* Elevation: only for things that float above the page (menus, dialogs, toasts) */
  --shadow-float: 0 18px 48px -12px rgb(10 10 10 / 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 450ms;
  --dur-slow: 900ms;
}

/* Dark: the fields drop to deep tints of themselves; ink turns pale pink-white */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #120910;
    --surface: #1e1219;
    --ink: #fff0fa;
    --muted: #c9a9bf;
    --action: var(--pink-100);
    --action-ink: var(--black);
    --action-hover: #ffd9f4;
    --field-pink: #3b1230;   --field-pink-ink: #fff0fa;
    --field-cyan: #0e3637;   --field-cyan-ink: #e9feff;
    --field-orange: #4a2c05; --field-orange-ink: #ffffff;
    --field-dark: #000000;   --field-dark-ink: #ffffff;
    --ok-bg: #0c2e1d; --ok: #7fe0aa;
    --warn-bg: #3a2600; --warn: #ffc56b;
    --bad-bg: #3d0a16; --bad: #ff8fa6;
  }
}
:root[data-theme='dark'] {
  --bg: #120910;
  --surface: #1e1219;
  --ink: #fff0fa;
  --muted: #c9a9bf;
  --action: var(--pink-100);
  --action-ink: var(--black);
  --action-hover: #ffd9f4;
  --field-pink: #3b1230;   --field-pink-ink: #fff0fa;
  --field-cyan: #0e3637;   --field-cyan-ink: #e9feff;
  --field-orange: #4a2c05; --field-orange-ink: #ffffff;
  --field-dark: #000000;   --field-dark-ink: #ffffff;
  --ok-bg: #0c2e1d; --ok: #7fe0aa;
  --warn-bg: #3a2600; --warn: #ffc56b;
  --bad-bg: #3d0a16; --bad: #ff8fa6;
}