/* ============================================================
   RELATIONSHIP OS — DESIGN TOKENS
   Import once at root. Never hardcode values.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap');

:root {

  /* ── FONTS ──────────────────────────────────────────────── */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;

  /* ── SURFACES (warm paper stack) ───────────────────────── */
  --surface:         #F7F4EF;   /* page background */
  --surface-low:     #F0EBE3;   /* subtle grouping */
  --surface-mid:     #EDE8E0;   /* card backgrounds */
  --surface-high:    #E4DDD4;   /* inputs, elevated */
  --surface-highest: #D8D0C4;   /* strongest container */
  --surface-pure:    #FDFCFA;   /* active cards */

  /* ── INK (never pure black) ─────────────────────────────── */
  --ink:         #1C1917;   /* primary text */
  --ink-mid:     #3D3733;   /* secondary text */
  --gray:        #8A8480;   /* captions, placeholders */
  --gray-light:  #C4BFB8;   /* ghost borders, dividers */

  /* ── PRIMARY (terracotta) ───────────────────────────────── */
  --primary:           #A0522D;
  --primary-light:     #D4844A;
  --primary-container: #F2DFC8;
  --on-primary:        #FDFCFA;

  /* ── ACCENT (plum) — paywall, highlights ────────────────── */
  --plum:        #6B5B7B;
  --plum-mid:    #4A3A5A;
  --plum-light:  #EDE8F5;

  /* ── GOLD — badges, savings callouts ───────────────────── */
  --gold:        #C49A3C;
  --gold-light:  #F5EDD6;

  /* ── SEMANTIC ───────────────────────────────────────────── */
  --success:           #4A7C59;
  --success-container: #D8F0E2;
  --error:             #8C3B3B;
  --error-container:   #F9DCDC;
  --warning:           #8A6428;
  --warning-container: #FCEFD3;

  /* ── APP ACCENT COLOURS ─────────────────────────────────── */
  --app-letters-in-time:  #C9837A;
  --app-bucket-list:      #D4724A;
  --app-storytime:        #A0825A;
  --app-mood-postcards:   #7B7EC4;
  --app-firsts-favorites: #C49A3C;
  --app-dream-together:   #6B9E7A;
  --app-family-blueprint: #6E8FA8;
  --app-memory-match:     #4AACB0;

  /* ── GRADIENTS ──────────────────────────────────────────── */
  --gradient-warm:    linear-gradient(135deg, #F7F4EF 0%, #F0EBE3 100%);
  --gradient-primary: linear-gradient(135deg, #A0522D 0%, #D4844A 100%);

  /* ── TYPE SCALE ─────────────────────────────────────────── */
  --text-display-lg:  clamp(2.5rem, 5vw, 4rem);
  --text-display-md:  clamp(2rem, 4vw, 3rem);
  --text-display-sm:  clamp(1.75rem, 3vw, 2.25rem);
  --text-headline-lg: clamp(1.5rem, 2.5vw, 2rem);
  --text-headline-md: clamp(1.25rem, 2vw, 1.5rem);
  --text-headline-sm: 1.125rem;
  --text-body-lg:     1rem;
  --text-body-md:     0.875rem;
  --text-body-sm:     0.8125rem;
  --text-label-lg:    0.875rem;
  --text-label-md:    0.75rem;
  --text-label-sm:    0.6875rem;

  /* ── TRACKING ───────────────────────────────────────────── */
  --tracking-display: 0.02em;
  --tracking-caps:    0.08em;
  --tracking-tight:  -0.01em;

  /* ── LINE HEIGHT ────────────────────────────────────────── */
  --leading-display:  1.1;
  --leading-headline: 1.25;
  --leading-body:     1.65;
  --leading-label:    1.4;

  /* ── SPACING (4px base) ─────────────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* ── RADIUS (minimum 8px, prefer 16px+) ────────────────── */
  --radius-sm:   0.5rem;    /*  8px */
  --radius-md:   1rem;      /* 16px */
  --radius-lg:   1.5rem;    /* 24px */
  --radius-xl:   2rem;      /* 32px */
  --radius-2xl:  3rem;      /* 48px */
  --radius-full: 9999px;    /* pill */

  /* ── SHADOWS (warm-tinted, never dark grey) ─────────────── */
  --shadow-card:    0 2px 20px rgba(28,25,23,.07);
  --shadow-float:   0 8px 40px rgba(28,25,23,.12);
  --shadow-ambient: 0 24px 64px rgba(28,25,23,.10);

  /* ── GLASS (nav + FAB only) ─────────────────────────────── */
  --glass-bg:   rgba(247,244,239,.92);
  --glass-blur: 16px;

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --max-width:     1200px;
  --content-width: 720px;
  --nav-height:    64px;
  --nav-height-mob:56px;

  /* ── TRANSITIONS ────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-mid:     250ms;
  --dur-slow:    400ms;

  /* ── SAFE AREAS (iOS notch/home bar) ───────────────────── */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}