/* ============================================================
   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).
   ============================================================ */

/* Fonts load from index.html (preconnect + stylesheet) — avoid @import blocking. */

: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;

  /* ----- Layout tiers (mobile / tablet / desktop) ----- */
  --layout-max-content: 1200px;
  --layout-page-x-mobile: 16px;
  --layout-page-x-tablet: 24px;
  --layout-page-x-desktop: 48px;
  --layout-grid-cols-catalog: 3;

  /* ----- 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.ser-mobile { --layout-grid-cols-catalog: 1; }
html.ser-tablet { --layout-grid-cols-catalog: 2; }
html.ser-desktop { --layout-grid-cols-catalog: 3; }

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;
}

/* Clickable affordance — browsers often leave button cursor as an arrow */
button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
a[href],
summary,
label {
  cursor: pointer;
}
button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

/* Detail modal Select — idle white; hover + selected fill brown */
.ser-detail-select-btn {
  background: #FFFFFF !important;
  color: #1F3A60 !important;
  border: 1px solid #E5E7EB !important;
  cursor: pointer !important;
}
.ser-detail-select-btn:hover,
.ser-detail-select-btn:focus,
.ser-detail-select-btn:active {
  background: #574F40 !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  cursor: pointer !important;
}
.ser-detail-select-btn.ser-detail-select-btn--on,
.ser-detail-select-btn.ser-detail-select-btn--on:hover,
.ser-detail-select-btn.ser-detail-select-btn--on:focus,
.ser-detail-select-btn.ser-detail-select-btn--on:active {
  background: #574F40 !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}
.ser-detail-select-btn.ser-detail-select-btn--on:disabled {
  cursor: pointer !important;
  opacity: 1 !important;
}