/* ============================================================
   Letalife – site.css
   Public-facing design system
   ============================================================ */

/* ---- Design tokens ---- */
/* Figtree — self-hosted variable woff2 (style-bible §5). Single Latin file,
   weights 400–900, swap so the system-stack fallback shows instantly. */
@font-face {
  font-family: 'Figtree';
  src: url('/static/fonts/figtree-latin-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cornflower blue family — drawn from the Letalife logo circle */
  --ll-blue-900: #1A4A80;
  /* NOTE: foreign Tailwind blue-800, kept only to preserve the existing agent-badge
     colour exactly. Outside the brand cornflower palette — pending a style-bible
     ruling on whether agent badges should adopt a brand token instead (LETAL-108). */
  --ll-blue-800: #1e40af;
  --ll-blue-700: #2B67A8;
  --ll-blue-500: #4D91D4;
  --ll-blue-200: #A8CCE8;
  --ll-blue-100: #D3E7F5;
  --ll-blue-50: #EBF5FC;

  /* Rose accent — drawn from the logo house roof */
  --ll-rose-700: #A83355;
  --ll-rose-600: #C8516B;
  --ll-rose-100: #FAD6DC;
  --ll-rose-50: #FEF0F3;

  --ll-amber-900: #78350f;    /* deep amber-brown — warning/elevated badge text */
  --ll-amber-600: #d97706;
  --ll-amber-500: #f59e0b;
  --ll-amber-200: #fde68a;    /* warning/success flash and callout border */
  --ll-amber-100: #fef3c7;

  --ll-green-700: #15803d;
  --ll-green-600: #16a34a;
  --ll-green-200: #bbf7d0;    /* success flash and callout border */
  --ll-green-100: #dcfce7;
  --ll-green-50: #f0fdf4;

  --ll-red-700: #b91c1c;
  --ll-red-600: #dc2626;
  --ll-red-300: #fca5a5;      /* danger flash border */
  --ll-red-100: #fee2e2;
  --ll-red-50: #fef2f2;

  --ll-violet-800: #5b21b6;
  --ll-violet-100: #ede9fe;
  --ll-violet-50: #f5f3ff;    /* "wanted" photo placeholder gradient light stop */

  --ll-slate-900: #0f172a;
  --ll-slate-800: #1e293b;
  --ll-slate-700: #334155;
  --ll-slate-600: #475569;
  --ll-slate-500: #64748b;
  --ll-slate-400: #94a3b8;
  --ll-slate-300: #cbd5e1;
  --ll-slate-200: #e2e8f0;
  --ll-slate-100: #f1f5f9;
  --ll-slate-50: #f8fafc;

  --ll-bg: #ffffea;
  /* warm cream, matches navbar and logo background */
  
  /* --ll-surface: #fff; */
  --ll-surface: rgba(255, 255, 255, 0.72);
  
  --ll-border: var(--ll-slate-200);
  --ll-text: var(--ll-slate-900);
  --ll-muted: var(--ll-slate-500);

  /* Semantic status tokens (style-bible §4) — one canonical bg/text pair per
     ad lifecycle status. Components read these, never raw hex, so the status
     palette has a single source of truth. Approved/rejected/expired alias the
     family ramps; pending (pale yellow) and hidden (pale pink) have no family
     equivalent, so their hex lives here as the canonical definition. */
  --ll-status-pending-bg: #fef9c3;            /* pale yellow */
  --ll-status-pending-text: #713f12;          /* brown */
  --ll-status-approved-bg: var(--ll-green-100);
  --ll-status-approved-text: var(--ll-green-700);
  --ll-status-rejected-bg: var(--ll-red-100);
  --ll-status-rejected-text: var(--ll-red-700);
  --ll-status-expired-bg: var(--ll-slate-100);   /* also used for withdrawn */
  --ll-status-expired-text: var(--ll-slate-600);
  --ll-status-hidden-bg: #fce7f3;             /* pale pink */
  --ll-status-hidden-text: #831843;           /* dark pink */

  /* Primary UI/display family (style-bible §5). Figtree is self-hosted via
     @font-face; until that woff2 is wired it falls back gracefully to the
     system stack, so this token is safe to consume everywhere now. */
  --ll-font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Pure white — used wherever a solid #fff surface is needed (as distinct from
     --ll-surface which is the frosted-glass card token). Having it as a token means
     the maintainer can audit #fff usages consistently. */
  --ll-white: #fff;

  --ll-r-xs: 0.25rem;
  --ll-r-sm: 0.375rem;
  --ll-r: 0.625rem;
  --ll-r-lg: 1rem;
  --ll-r-xl: 1.25rem;
  --ll-r-2xl: 1.75rem;
  /* Pill / fully-round shape — for badges, chips, pill CTAs (style-bible §6). */
  --ll-r-pill: 999px;

  --ll-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --ll-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.07);
  --ll-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --ll-shadow-md: 0 8px 20px -4px rgb(0 0 0 / 0.10), 0 4px 8px -4px rgb(0 0 0 / 0.08);
  --ll-shadow-lg: 0 16px 40px -8px rgb(0 0 0 / 0.14), 0 8px 16px -8px rgb(0 0 0 / 0.10);

  /* RGB channel helpers — used in box-shadow rgb() calls where we can't feed a hex
     token directly. These are the channel values of the matching palette tokens. */
  --ll-rose-600-rgb: 200 81 107;   /* = #C8516B (--ll-rose-600) */
  --ll-blue-700-rgb: 43 103 168;   /* = #2B67A8 (--ll-blue-700) */
  --ll-blue-500-rgb: 77 145 212;   /* = #4D91D4 (--ll-blue-500) */

  /* Z-index scale — every stacking context uses one of these; no magic numbers. */
  --ll-z-lightbox: 2000;   /* full-viewport overlay */
  --ll-z-navbar:   1000;   /* sticky nav */
  --ll-z-dropdown:  500;   /* search results, dropdowns */
  --ll-z-card:       10;   /* card overlays (heart button etc.) */
}