/* ============================================================
   Design tokens — Diggo Design System (blue theme) + Layout Spec grid.
   Values transcribed from the Diggo tokens; do not hardcode elsewhere.
   ============================================================ */

@font-face { font-family: 'Outfit'; font-weight: 400; font-display: swap; src: url('../fonts/Outfit-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 500 600; font-display: swap; src: url('../fonts/Outfit-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 700 800; font-display: swap; src: url('../fonts/Outfit-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Google Sans'; font-weight: 400; font-display: swap; src: url('../fonts/GoogleSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Google Sans'; font-weight: 500 600; font-display: swap; src: url('../fonts/GoogleSans-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Google Sans'; font-weight: 700; font-display: swap; src: url('../fonts/GoogleSans-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Gilroy'; font-weight: 500 600; font-display: swap; src: url('../fonts/Gilroy-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Gilroy'; font-weight: 700; font-display: swap; src: url('../fonts/Gilroy-Bold.woff2') format('woff2'); }

:root {
  /* Neutral ramp */
  --neutral-0: #ffffff; --neutral-50: #f7f7f7; --neutral-100: #ededed; --neutral-200: #dddddd;
  --neutral-300: #cccccc; --neutral-400: #9c9c9c; --neutral-500: #6a6a6a; --neutral-600: #4d4d4d;
  --neutral-700: #363636; --neutral-800: #222222; --neutral-900: #000000; --ink: #333333;

  /* Blue ramp */
  --blue-50: #f5faff; --blue-100: #e0efff; --blue-200: #c2deff; --blue-300: #70b3ff; --blue-400: #1a85ff;
  --blue-500: #006be5; --blue-600: #0053b2; --blue-700: #003e85; --blue-800: #002d61; --blue-900: #001d3d;
  --blue-link: #236ef5;

  /* Green / emerald / amber */
  --green-50: #f7fdfa; --green-100: #e8f8f0; --green-600: #2b8659; --green-700: #206443;
  --emerald-50: #ecfdf5; --emerald-500: #059669; --emerald-600: #047857;
  --amber-400: #ffbb00; --amber-bg: #fffcf2;

  /* Semantic — blue theme */
  --brand-primary: var(--blue-500);
  --brand-primary-hover: var(--blue-600);
  --brand-primary-active: var(--blue-700);
  --brand-on-primary: var(--neutral-0);
  --brand-soft: var(--blue-50);
  --brand-soft-strong: var(--blue-100);

  --text-primary: var(--ink);
  --text-secondary: var(--neutral-500);
  --text-tertiary: var(--neutral-400);
  --text-disabled: var(--neutral-300);
  --text-inverse: var(--neutral-0);
  --text-link: var(--blue-link);

  --surface-page: var(--neutral-0);
  --surface-subtle: var(--neutral-50);
  --surface-muted: var(--neutral-100);
  --surface-card: var(--neutral-0);
  --surface-inverse: var(--neutral-700);
  --scrim: rgba(0,0,0,0.48);
  --scrim-light: rgba(255,255,255,0.80);

  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-focus: var(--blue-500);

  --success: var(--emerald-500); --success-bg: var(--emerald-50);
  --error: #dc2626; --error-bg: #fef2f2;
  --warning: var(--amber-400); --warning-bg: var(--amber-bg);
  --info: var(--blue-500); --info-bg: #eff6ff;
  --star: #ffbb00;

  /* Typography */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent: 'Gilroy', -apple-system, BlinkMacSystemFont, sans-serif;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --text-display-xl: 64px; --text-display-l: 56px; --text-display-m: 48px; --text-display-s: 40px;
  --text-headline-l: 32px; --text-headline-m: 28px; --text-headline-s: 24px; --text-headline-xs: 20px;
  --text-body-l: 18px; --text-body-m: 16px; --text-body-s: 14px; --text-body-xs: 12px;
  --leading-display: 1.25; --leading-heading: 1.3; --leading-body: 1.5; --tracking-body: 0.1px;

  /* Shape, spacing, elevation, motion */
  --radius-none: 0; --radius-xs: 4px; --radius-s: 8px; --radius-m: 12px; --radius-l: 16px; --radius-xl: 24px; --radius-full: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px;
  --shadow-xs: 0 1px 3px 0 rgba(0,0,0,0.10);
  --shadow-s: 0 2px 8px 0 rgba(0,0,0,0.08);
  --shadow-m: 0 4px 16px 0 rgba(0,0,0,0.08);
  --shadow-l: 0 8px 28px 0 rgba(0,0,0,0.10);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms; --duration-base: 200ms;

  /* Layout Spec */
  --container-max-width: 1100px;
  --container-safe-gutter: 24px;
  --layout-two-col-main: 728px;
  --layout-two-col-gutter: 72px;
  --layout-two-col-sidebar: 300px;
  --mobile-side-padding: 16px;
  --header-height-desktop: 64px;
  --header-height-mobile: 56px;
}