/* Six Degrees — Colors & Type
 * Concept D (Refined) — Sage + Navy palette, Open Sans + Roboto
 * Source of truth: app/theme/colors.ts, app/theme/typography.ts, STYLE-GUIDE.md
 *
 * Trimmed for the pre-launch landing page: only the four font weights the
 * page actually uses are declared (Open Sans Bold, Roboto Light/Regular/Medium).
 */

@font-face { font-family:'Roboto'; font-weight:300; font-style:normal; src:url('fonts/Roboto-Light.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Roboto'; font-weight:400; font-style:normal; src:url('fonts/Roboto-Regular.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Roboto'; font-weight:500; font-style:normal; src:url('fonts/Roboto-Medium.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Open Sans'; font-weight:700; font-style:normal; src:url('fonts/OpenSans-Bold.ttf') format('truetype'); font-display:swap; }

:root {
  /* ── Core palette ── */
  --sd-neutral-100: #FFFDF9; /* warm white card surface */
  --sd-neutral-150: #E8E2DA; /* warm card border */
  --sd-neutral-200: #F7F5F2; /* warm off-white screen bg */
  --sd-neutral-300: #8DC9A6; /* light sage — separators, disabled */
  --sd-neutral-400: #449991; /* medium teal */
  --sd-neutral-500: #68A093; /* sage teal — dim text */
  --sd-neutral-600: #145463; /* dark teal */
  --sd-neutral-700: #004A68; /* deep navy — headers */
  --sd-neutral-800: #1A1A1A; /* near-black text */
  --sd-neutral-900: #000000;

  /* sage scale */
  --sd-primary-100: #E8F5EF;
  --sd-primary-200: #C5E8D6;
  --sd-primary-300: #8DC9A6;
  --sd-primary-400: #689C80; /* Sage Green — primary accent */
  --sd-primary-500: #449991;
  --sd-primary-600: #145463;

  /* navy scale */
  --sd-secondary-100: #E3EBF0;
  --sd-secondary-200: #A0BFC9;
  --sd-secondary-300: #449991;
  --sd-secondary-400: #004A68; /* Deep Navy */
  --sd-secondary-500: #0F2B47; /* Near Black — tab bar */

  /* gold — USE EXACTLY ONCE PER SCREEN */
  --sd-accent-100: #FDF3DC;
  --sd-accent-200: #F5E0A0;
  --sd-accent-300: #EDD278;
  --sd-accent-400: #DEB463; /* Warm Gold — country badge only */
  --sd-accent-500: #C9963A;

  /* semantic */
  --sd-angry-100: #FAE3E0;
  --sd-angry-500: #C03403;

  /* ── Semantic tokens (use these, not raw palette values) ── */
  --sd-bg:              var(--sd-neutral-200);
  --sd-bg-card:         var(--sd-neutral-100);
  --sd-border-card:     var(--sd-neutral-150);
  --sd-border:          var(--sd-neutral-400);
  --sd-separator:       var(--sd-neutral-300);

  --sd-header-bg:       var(--sd-primary-400); /* sage — primary brand */
  --sd-header-text:     #FFFFFF;
  --sd-tabbar-bg:       var(--sd-secondary-500); /* near-black */
  --sd-tabbar-border:   rgba(104,156,128,0.20);
  --sd-tabbar-inactive: rgba(255,255,255,0.45);

  --sd-text:       var(--sd-neutral-700); /* deep navy body text */
  --sd-text-ink:   var(--sd-secondary-500); /* near-black for headings */
  --sd-text-dim:   var(--sd-neutral-500); /* metadata, placeholders */

  --sd-tint:          var(--sd-primary-400); /* sage — primary brand */
  --sd-tint-inactive: var(--sd-neutral-300);
  --sd-error:         var(--sd-angry-500);
  --sd-error-bg:      var(--sd-angry-100);

  /* overlays */
  --sd-cover-vignette:       rgba(0, 74, 104, 0.45);
  --sd-welcome-overlay:      rgba(4, 18, 38, 0.45);
  --sd-cover-vignette-light: rgba(0, 74, 104, 0.22);
  --sd-cover-vignette-med:   rgba(0, 74, 104, 0.28);

  /* ── Fonts ── */
  --sd-font-primary:   'Open Sans', system-ui, -apple-system, sans-serif;
  --sd-font-secondary: 'Roboto', system-ui, -apple-system, sans-serif;
  --sd-font-mono:      'Courier', 'Courier New', monospace;

  /* ── Spacing (matches app/theme/spacing.ts) ── */
  --sd-space-xxxs: 2px;
  --sd-space-xxs:  4px;
  --sd-space-xs:   8px;
  --sd-space-sm:   12px;
  --sd-space-md:   16px;
  --sd-space-lg:   24px;
  --sd-space-xl:   32px;
  --sd-space-xxl:  48px;
  --sd-space-xxxl: 64px;

  /* ── Radii ── */
  --sd-radius-sm:   4px;
  --sd-radius-md:   8px;
  --sd-radius-lg:   12px;
  --sd-radius-full: 9999px;

  /* ── Stacked card shadow (offset, no blur — the signature effect) ── */
  --sd-shadow-card:
    2px 3px 0px rgba(232, 226, 218, 0.6),
    4px 6px 0px rgba(232, 226, 218, 0.3);
}