/* Daiya marketplace theme.

   This file mirrors the marketing site exactly: the values below are copied
   from site-astro/src/styles/tokens.css, which is the source of truth. The
   marketing site is the brand. If a colour changes there, change it here in
   the same edit. Never introduce a new brand colour in the app.

   Neighborly-derived palette, with Daiya's own logo blue and red carrying the
   accent: navy #002554, blue #407EC9, yellow #F5C200, tint #F6F9FD, Inter. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-700.woff2') format('woff2');
}

:root {
  color-scheme: light;

  /* ---- Brand, identical to the marketing site ---- */

  /* Blue scale (--primary-*) */
  --primary-25: #f6f9fd;
  --primary-50: #ecf2fa;
  --primary-100: #c4d7ee;
  --primary-200: #a7c4e6;
  --primary-300: #7fa9db;
  --primary-400: #6698d4;
  --primary-500: #407ec9;   /* brand blue */
  --primary-600: #3a73b7;
  --primary-700: #2d598f;
  --primary-800: #23456f;
  --primary-900: #1b3554;   /* headings */
  --primary-950: #002554;   /* navy */

  /* Yellow scale (--secondary-*) */
  --secondary-50: #fff9eb;
  --secondary-100: #ffeebf;
  --secondary-200: #ffe5a1;
  --secondary-300: #ffd976;
  --secondary-400: #ffd25b;
  --secondary-500: #f5c200; /* CTA yellow */
  --secondary-600: #e8b52e;
  --secondary-700: #b59b00;

  /* Neutrals */
  --white: #fff;
  --gray-25: #fcfcfd;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Accent from the logo mark */
  --accent-red: #e31e24;
  --accent-blue: #0c54a0;

  /* ---- App aliases, so app CSS reads in its own words ---- */

  /* Ground */
  --navy: var(--primary-950);
  --navy-2: #001d42;
  --navy-ink: #eef2f7;
  --navy-muted: #b4bfcc;
  --navy-rule: rgba(255, 255, 255, 0.18);

  /* Paper */
  --paper: var(--white);
  --paper-2: #f6f9fd;
  --paper-3: var(--primary-50);
  --sheet: var(--white);

  /* Ink */
  --ink: var(--gray-900);
  --ink-2: var(--gray-700);
  --muted: var(--gray-500);
  --ink-heading: var(--primary-900);

  /* Rules */
  --line: var(--gray-200);
  --line-2: var(--gray-300);

  /* Blue and signal */
  --blue: var(--primary-500);
  --blue-600: var(--primary-600);
  --blue-soft: var(--primary-50);
  --signal: var(--secondary-500);
  --signal-hover: var(--secondary-600);
  --signal-soft: var(--secondary-50);

  /* Status. Green and red are functional, not brand. */
  --green: #10703a;
  --green-soft: #e6f4ec;
  --red: #b7191c;
  --red-soft: #fbe9e9;
  --amber: #8a5a00;
  --amber-soft: #fdf2dc;

  /* Type: Inter everywhere, exactly as the marketing site */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-display: var(--font);
  --fh: var(--font);
  --fb: var(--font);

  /* Radii, matching the site */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-input: 8px;
  --radius-ctl: 8px;
  --radius-card: 12px;
  --radius-pill: 999px;

  /* Space, matching the site */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  /* Elevation, matching the site */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-card: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-lift: 0 10px 26px rgba(0, 37, 84, 0.1);
  --focus-ring: 0 0 0 3px rgba(64, 126, 201, 0.28);
}