/* ============================================================
   theme.css — single source of truth for the site's design.
   Every color, font, radius and shadow used by the site CSS
   resolves to a token defined here. Change the look here only.
   Loaded before all other site CSS (see app/layout.tsx).
   ============================================================ */

:root {
  /* ---- Brand (marigold / Vrindavan palette) ---- */
  --color-brand: #ffd100;         /* dominant marigold yellow */
  --color-brand-bright: #ffee32;  /* highlight yellow */
  --color-brand-deep: #8a6d00;    /* darkened marigold — accent text on light */
  --color-bg: #fffae6;            /* warm cream page background */

  /* ---- Neutrals ---- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-ink: #232323;           /* body text */
  --color-gray-dark: #474747;
  --color-gray: #666666;
  --color-gray-light: #999999;
  --color-gray-lighter: #bbbbbb;
  --color-border: #cccccc;
  --color-surface-alt: #f9f9f9;   /* subtle panels */
  --color-surface-muted: #edefeb; /* muted panels */

  /* ---- Status ---- */
  --color-success: #28d685;
  --color-success-strong: #28a745;
  --color-success-hover: #218838;
  --color-danger: #d82637;
  --color-error: #cc0000;
  --color-error-bright: #ff0000;
  --color-error-deep: #dd0000;
  --color-warning: #febf00;
  --color-info: #0dcbf1;
  --color-positive: #00cc00;
  --color-positive-bright: #00dd00;

  /* ---- Translucent helpers ---- */
  --tint-brand-strong: rgba(255, 209, 0, 0.9);
  --tint-brand-soft: rgba(255, 209, 0, 0.4);
  --tint-brand-faint: rgba(255, 209, 0, 0.15);
  --tint-brand-hover: rgba(255, 209, 0, 0.3);
  --tint-ink-04: rgba(27, 31, 10, 0.04);
  --tint-ink-06: rgba(27, 31, 10, 0.06);
  --tint-ink-08: rgba(27, 31, 10, 0.08);
  --tint-white-80: rgba(255, 255, 255, 0.8);
  --shadow-05: rgba(0, 0, 0, 0.05);
  --shadow-07: rgba(0, 0, 0, 0.07);
  --shadow-12: rgba(0, 0, 0, 0.12);
  --shadow-15: rgba(0, 0, 0, 0.15);

  /* ---- Typography ---- */
  --font-display: "Inter Tight", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: var(--font-display);

  /* Mobirise theme reads these (additional.css / style.css) but never
     defined them anywhere — the theme now owns them. */
  --display1-font: var(--font-display);
  --display2-font: var(--font-display);
  --display4-font: var(--font-display);
  --display5-font: var(--font-display);
  --display7-font: var(--font-display);
  --display1-size: 5;
  --display2-size: 4;
  --display4-size: 1.4;
  --display5-size: 2;
  --display7-size: 1.4;

  /* ---- Shape ---- */
  --radius-card: 1rem;
  --radius-panel: 2rem;
  --radius-pill: 100px;
  --shadow-card: 0 1px 4px var(--shadow-05);
  --shadow-card-hover: 0 5px 14px var(--shadow-12);

  /* ---- Legacy aliases (Mobirise/custom-global names) ---- */
  --background: var(--color-bg);
  --dominant-color: var(--color-brand);
  --primary-color: var(--color-brand-bright);
  --secondary-color: var(--color-gray-dark);
  --success-color: var(--color-success);
  --danger-color: var(--color-danger);
  --warning-color: var(--color-warning);
  --info-color: var(--color-info);
  --background-text: var(--color-black);
  --dominant-text: var(--color-black);
  --primary-text: var(--color-black);
  --secondary-text: var(--color-white);
  --success-text: var(--color-black);
  --danger-text: var(--color-white);
  --warning-text: var(--color-black);
  --info-text: var(--color-black);
}

/* Base typography — the theme owns the body defaults. */
body {
  font-family: var(--font-body);
  color: var(--color-ink);
}