/*
 * The Pocket Cameraman design system on the web.
 * Colours, radii, spacing and the shadow are the app's own, one to one
 * (app/src/theme/theme.ts). What the web adds is marked "web only".
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
}

/* The wordmark only. */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-latin-800-italic.woff2') format('woff2');
}

/* Taglines only. */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/lora-latin-500-italic.woff2') format('woff2');
}

:root {
  color-scheme: light;

  --primary: #fd6473;
  --primary-pressed: #e85464;
  --primary-soft: #fff0f2;
  --primary-subtle: #fff7f8;

  --bg: #fefafc;
  --surface: #ffffff;
  --surface-muted: #f6f2f6;

  --ink: #151522;
  --ink-2: #747481;
  --ink-3: #a4a1ac;
  --border: #ece8ed;

  --success: #209b45;
  --success-soft: #e2f7df;

  --pose-good: #bdec68;
  --pose-warning: #ffd04f;
  --pose-bad: #fd6473;

  --camera-dock: #16161d;
  --camera-control: rgba(20, 20, 24, 0.58);
  --camera-overlay: rgba(18, 18, 24, 0.62);
  --camera-screen: #2b2b35; /* the styleguide's own demo frame, app/src/ui/PosePreview.tsx */

  /* Web only: the app's greys and coral are a little too light for body-size text on a page. */
  --ink-2-web: #6a6a77; /* 5.1:1 on --bg */
  --primary-text: #c8364a; /* 4.9:1 on --bg, for body-size links */
  --on-dark-2: #b9b8c4; /* secondary text on --camera-dock */

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-button: 24px;
  --r-full: 999px;

  /* A strict 4pt grid. */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 20px;
  --s-xxl: 24px;
  --s-section: 32px;

  /* Cards lift off the background instead of using a border. */
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.05);
  /* Web only: the phone stands further off the page than a card. */
  --shadow-phone: 0 24px 48px -12px rgba(21, 21, 34, 0.22);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-tagline: 'Lora', Georgia, 'Times New Roman', serif;

  /* Web only: the app's scale stops at 30px, which is small for a page's first line. */
  --text-h1: clamp(2.125rem, 1.45rem + 3vw, 3.25rem);
  --text-h2: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
  --text-tagline: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);

  --container: 1120px;
  --gutter: 16px;
  --section-gap: 64px;
  --header-height: 56px;

  --ease: cubic-bezier(0.33, 1, 0.68, 1);
}

@media (min-width: 600px) {
  :root {
    --gutter: 24px;
  }
}

@media (min-width: 900px) {
  :root {
    --section-gap: 96px;
    --header-height: 64px;
  }
}