/* ============================================================
   Serenity Casket & Funerals — Design Tokens
   Neutral-base palette (v12): clean white cards on a soft grey
   page, desaturated navy primary, warm taupe text, with warm
   beige reserved for accents (chips, selected tags, hover).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap");

:root {
  /* ----- Brand colors ----- */
  --brand-navy:      #003169;  /* PMS 294 C — canonical brand primary */
  --brand-navy-deep: #002452;
  --brand-tan:       #C8B597;
  --brand-tan-soft:  #D9CCB5;
  --brand-tan-deep:  #B59E7C;

  /* ----- Neutral scale (cool-balanced; not stark, not slate-cold) ----- */
  --slate-50:  #FAFAFA;   /* app background */
  --slate-75:  #EFE7D4;   /* WARM ACCENT — chips, selected fill */
  --slate-100: #F3F4F6;   /* hover surface */
  --slate-150: #F0F1F4;   /* divider */
  --slate-200: #E5E7EB;   /* card / input border */
  --slate-300: #D1D5DB;
  --slate-400: #9CA3AF;
  --slate-500: #6B7280;   /* secondary text (neutral leaning warm) */
  --slate-600: #4A5568;   /* strong border, selected card outline */
  --slate-700: #1F3A60;   /* primary text — navy family, matches brand */
  --slate-800: #1F1C17;
  --slate-900: #14110E;

  /* ----- Semantic surfaces ----- */
  --surface-app:     var(--slate-50);
  --surface-card:    #FFFFFF;             /* clean white card */
  --surface-chip:    var(--slate-75);     /* warm accent only */
  --surface-overlay: rgba(31, 34, 41, 0.45);

  /* ----- Semantic text ----- */
  --fg-primary:    var(--slate-700);
  --fg-secondary:  #6B7A8F;               /* muted slate-blue */
  --fg-tertiary:   #9CA8B8;
  --fg-onDark:     #FFFFFF;
  --fg-link:       var(--brand-navy);

  /* ----- Borders ----- */
  --border-subtle:   var(--slate-200);
  --border-strong:   var(--slate-600);
  --border-focus:    var(--brand-navy);

  /* ----- Status ----- */
  --status-success:    #9CAE82;
  --status-success-fg: #5B7D4F;
  --status-warning:    #C28A45;
  --status-danger:     #A35854;
  --status-info:       var(--brand-navy);

  /* ----- Shadows ----- */
  --shadow-card:     0 4px 6px -4px rgba(15,23,42,0.08), 0 10px 15px -3px rgba(15,23,42,0.06);
  --shadow-card-sm:  0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.06);
  --shadow-overlay:  0 20px 25px -5px rgba(15,23,42,0.10), 0 10px 10px -5px rgba(15,23,42,0.04);
  --shadow-press:    inset 0 1px 0 rgba(15,23,42,0.04);

  /* ----- Radii ----- */
  --radius-xs:    4px;  --radius-sm: 6px; --radius-md: 8px;
  --radius-lg:   12px;  --radius-xl: 16px; --radius-pill: 9999px;

  /* ----- Spacing scale ----- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 48px; --space-10: 64px; --space-11: 80px;

  /* ----- Type families ----- */
  --font-ui:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Cormorant Garamond", "Trajan Pro", "Optimus Princeps", Georgia, serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ----- Type scale ----- */
  --type-display-1: 600 48px/56px "Cormorant Garamond", serif;
  --type-display-2: 500 32px/40px "Cormorant Garamond", serif;
  --type-h1:        500 24px/32px var(--font-ui);
  --type-h2:        500 20px/28px var(--font-ui);
  --type-h3:        500 18px/27px var(--font-ui);
  --type-body-lg:   400 16px/24px var(--font-ui);
  --type-body-lg-m: 500 16px/24px var(--font-ui);
  --type-body:      400 14px/20px var(--font-ui);
  --type-body-m:    500 14px/20px var(--font-ui);
  --type-caption:   400 12px/16px var(--font-ui);
  --type-caption-m: 500 12px/16px var(--font-ui);

  --tracking-h1:      0.070px;
  --tracking-h2:      -0.449px;
  --tracking-h3:      -0.439px;
  --tracking-body-lg: -0.313px;
  --tracking-body:    -0.150px;
  --tracking-caption: 0px;
}

html, body {
  font: var(--type-body);
  color: var(--fg-primary);
  background: var(--surface-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--type-h1); letter-spacing: var(--tracking-h1); color: var(--fg-primary); margin: 0; }
h2 { font: var(--type-h2); letter-spacing: var(--tracking-h2); color: var(--fg-primary); margin: 0; }
h3 { font: var(--type-h3); letter-spacing: var(--tracking-h3); color: var(--fg-primary); margin: 0; }
p  { font: var(--type-body); letter-spacing: var(--tracking-body); color: var(--fg-secondary); margin: 0; }

small, .ser-caption { font: var(--type-caption); color: var(--fg-secondary); }

.ser-brand-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
}