/*
 * Nasab design tokens — mirrors lib/styles/ in the Nasab Flutter app repo
 * (ibrahimbroachwala/nasab, develop branch) exactly. Do not hand-pick new
 * colors/spacing/radii here — pull from the app repo the same way this file
 * was built. See ../PHASE0_FINDINGS.md for full sourcing notes.
 *
 * Fonts: load via Google Fonts, e.g.
 *   <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@400;600;700&family=Lora:ital@1&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
 */

:root {
  /* Colors — lib/styles/app_colors.dart palette, remapped dark-by-default
     for the landing page. --color-primary (Deep Heritage Brown) keeps its
     original app value and its original *background* jobs (buttons, the
     pricing-card head) unchanged — it stays a dark, branded surface either
     way. Roles that used --color-primary as *text* (headings, links, the
     wordmark, pricing labels) now read from --color-heading / --color-link
     instead, since dark brown text on a dark page has no contrast. See
     ../PHASE0_FINDINGS.md for the original light-theme sourcing notes. */
  --color-background: #1A1410;      /* page background — near-black heritage brown */
  --color-vintage-white: #FAF7F2;   /* unchanged: light surface for text-on-dark, input fields, photo-frame margin */
  --color-primary: #4B3621;         /* unchanged: Deep Heritage Brown — button/pricing-head backgrounds only */
  --color-heading: var(--color-vintage-white); /* headings, wordmark, footer wordmark, pricing labels */
  --color-link: #C9A25E;            /* brighter antique gold — links, outline-button text on dark */
  --color-secondary: #C9BDAC;       /* body text — warm light taupe, readable on dark bg */
  --color-accent: #C9A25E;          /* Antique Gold, brightened for dark surfaces — CTAs, focus/outline */
  --color-success: #93AC8E;         /* Olive Green, lightened for contrast on dark */
  --color-timeline-accent: #6F3B3B; /* Muted Burgundy — timeline accent */
  --color-card-surface: #120D09;    /* darker band background (positioning/pricing/features sections) */
  --color-divider: #453A2C;         /* muted warm grey-brown — dividers / borders on dark */
  --color-error: #E5695F;           /* brightened for contrast on dark */
  --color-male: #5B7A9D;            /* Dusty Blue */
  --color-female: #C77B93;          /* Dusty Rose */

  color-scheme: dark;

  /* Typography — lib/styles/app_text_styles.dart (via google_fonts) */
  --font-heading: 'Fraunces', serif;   /* headings: 32/600, 24/600, 18/600 in-app */
  --font-body: 'Inter', sans-serif;    /* body: 16/400, 14/400, 12/400 in-app, color secondary */
  --font-caption: 'Lora', serif;       /* captions/secondary emphasis: 12px italic, color secondary */

  /* Spacing — 8pt grid, lib/styles/app_spacing.dart */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* Radius — lib/styles/app_radii.dart
     NOTE: the app's own doc-comment says "18-24px everywhere" but the actual
     shipped constant is 12px (large). Code is source of truth; using 12px
     here to match what's actually rendered in the app. */
  --radius-small: 4px;
  --radius-large: 12px;
  --radius-circle: 32px;

  /* Shadows — inlined per-widget in the app (no shared app_shadows.dart) */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.08);                 /* CardThemeData, elevation 1 */
  --shadow-photo-frame: 0 2px 4px rgba(0, 0, 0, 0.12);          /* FramedMediaBox, +3px vintage-white margin */
  --shadow-memory-card: 0 3px 8px rgba(0, 0, 0, 0.08);          /* memory_card.dart */

  /* Motion — lib/styles/app_motion.dart */
  --motion-fast: 150ms;
  --motion-medium: 300ms;
  --motion-slow: 600ms;
  --motion-stagger-step: 50ms;
  --ease-entrance: cubic-bezier(0.215, 0.61, 0.355, 1);  /* easeOutCubic */
  --ease-standard: ease-in-out;                          /* easeInOut */
}