/* Avela design tokens. Colours, radii and sizes come from the app (tinder_app/frontend lib/core/theme/avela_colors.dart,
   v2 palette: neutral base, berry accent), converted to OKLCH. Dark mode follows the system (prefers-color-scheme).
   Every colour and font on the site goes through these names: no literal colour past this file. */
@font-face { font-family: "Onest"; src: url("/fonts/Onest-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/fonts/Onest-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("/fonts/Onest-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;

  /* spacing: the app's 4/8/12/16/24/32/40/48 scale, stretched for page sections */
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;

  /* type: Onest, 16px body (app: body 16/23), titles 20/26, screen title 28/34, display scaled up for the web */
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem;
  --text-display: clamp(2.75rem, 4.6vw + 1rem, 5.25rem);
  --text-display-s: clamp(2.25rem, 3vw + 1rem, 3.75rem);
  --text-section: clamp(1.875rem, 2.2vw + 1rem, 3rem);
  --text-title: clamp(1.25rem, 0.5vw + 1rem, 1.5rem);
  --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.3125rem);
  --tracking-display: -0.03em;
  --font-display: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;

  /* layout */
  --container: 1240px; --gutter: 48px; --gap-columns: 32px;
  --section-gap-s: 96px; --section-gap: 128px;
  --header-h: 68px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500;

  /* radii (app Radii: hero 22, category 18, group 16, input 14; pill for buttons and chips) */
  --radius-hero: 22px; --radius-card: 18px; --radius-group: 16px; --radius-input: 14px; --radius-pill: 999px;
  --rule-hair: 1px;
  --tap: 48px; --button-h: 52px;

  /* colour, light (app AvelaColors.light) */
  --color-paper: oklch(98.2% 0.004 330);          /* background FAF9F7, tinted toward the berry */
  --color-paper-2: oklch(95.3% 0.006 318);        /* surfaceRaised F1EEF2 */
  --color-paper-3: oklch(92.7% 0.020 336);        /* selectedContainer F0E2EC: the berry wash */
  --color-surface: oklch(99.4% 0.002 330);        /* cards and fields on paper */
  --color-ink: oklch(23.8% 0.014 311);            /* text 211D24 */
  --color-ink-2: oklch(36% 0.016 312);
  --color-muted: oklch(50.3% 0.019 313);          /* textSecondary 68616C */
  --color-rule: oklch(90.9% 0.009 315);           /* divider E3DFE5 */
  --color-boundary: oklch(61.3% 0.024 316);       /* controlBoundary 8A808E: essential edges, 3:1 */
  --color-accent: oklch(46.9% 0.123 337);         /* primary 843B73 */
  --color-accent-hover: oklch(41% 0.12 337);
  --color-accent-ink: oklch(99.2% 0.003 330);      /* onPrimary */
  --color-accent-text: oklch(46.9% 0.123 337);    /* the accent as link text on paper */
  --color-focus: oklch(50% 0.2 337);
  --color-success: oklch(45.3% 0.083 160);
  --color-peach: oklch(78.8% 0.079 43);           /* decorative only, never text or actions */
  --color-sage: oklch(85.7% 0.030 137);
  --color-lime: oklch(92.3% 0.084 122);
  --color-on-lime: oklch(36.4% 0.069 129);
  --color-band: oklch(23.8% 0.014 311);           /* the closing download band */
  --color-band-ink: oklch(97% 0.004 315);
  --color-band-muted: oklch(80% 0.016 312);
  --color-qr-dark: oklch(23.8% 0.014 311);
  --color-qr-light: oklch(99.4% 0.002 330);
  --color-scrim: oklch(14% 0.01 310 / 0.6);
  --shadow-card: 0 1px 2px oklch(20% 0.02 330 / 0.06), 0 12px 32px -12px oklch(20% 0.03 330 / 0.18);
}

/* colour, dark (app AvelaColors.dark) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: oklch(18.9% 0.006 301);        /* background 141316 */
    --color-paper-2: oklch(23.9% 0.010 304);      /* surface 201E23 */
    --color-paper-3: oklch(32.2% 0.041 337);      /* selectedContainer 412B3B */
    --color-surface: oklch(23.9% 0.010 304);
    --color-ink: oklch(97% 0.004 315);            /* text F6F4F7 */
    --color-ink-2: oklch(88% 0.008 315);
    --color-muted: oklch(77.3% 0.020 310);        /* textSecondary B9B2BF */
    --color-rule: oklch(34.7% 0.020 310);         /* divider 3D3742 */
    --color-boundary: oklch(59.9% 0.030 312);
    --color-accent: oklch(79.9% 0.095 337);       /* primary E5A6D4 */
    --color-accent-hover: oklch(85% 0.08 337);
    --color-accent-ink: oklch(26.3% 0.049 335);   /* onPrimary 331B2E */
    --color-accent-text: oklch(82% 0.09 337);
    --color-focus: oklch(82% 0.12 337);
    --color-success: oklch(80% 0.09 160);
    --color-band: oklch(27.9% 0.013 305);         /* surfaceRaised 2A272E */
    --color-band-ink: oklch(97% 0.004 315);
    --color-band-muted: oklch(80% 0.016 312);
    --shadow-card: 0 0 0 1px oklch(40% 0.02 310 / 0.5);
  }
}