/* ==========================================================================
   Upper Hand — Design tokens
   Single source of truth for brand, color, type, space, depth and motion.
   Organization themes override these via data/theme.php → :root.
   ========================================================================== */

:root {
  /* ---- Brand: "Hindu Kush teal" ------------------------------------------ */
  --brand-50:  #eef7f5;
  --brand-100: #d5ede8;
  --brand-200: #abdad1;
  --brand-300: #77c0b3;
  --brand-400: #44a291;
  --brand-500: #248676;
  --brand-600: #146b5f;
  --brand-700: #0f564d;
  --brand-800: #0d453f;
  --brand-900: #0b3834;
  --brand-950: #05201e;

  /* ---- Accent: "Saffron" — reserved for giving actions ------------------- */
  --accent-50:  #fef8ec;
  --accent-100: #fcedcb;
  --accent-200: #f9d993;
  --accent-300: #f6c25b;
  --accent-400: #f3ae36;
  --accent-500: #efa021;
  --accent-600: #d8850f;
  --accent-700: #b3660c;
  --accent-ink: #231602;

  /* ---- Warm neutrals ----------------------------------------------------- */
  --stone-0:   #ffffff;
  --stone-25:  #fcfbf9;
  --stone-50:  #faf8f5;
  --stone-100: #f3f0eb;
  --stone-150: #ece8e1;
  --stone-200: #e3ded5;
  --stone-300: #cfc8bd;
  --stone-400: #a39c91;
  --stone-500: #7c766d;
  --stone-600: #5c5750;
  --stone-700: #423e39;
  --stone-800: #2a2825;
  --stone-900: #1a1917;
  --stone-950: #100f0e;

  /* ---- Pillar hues (configurable per organization) ----------------------- */
  --pillar-education: #3563e9;
  --pillar-welfare:   #d9622b;
  --pillar-legal:     #6e56cf;
  --pillar-medical:   #df3f5a;
  --pillar-skylark:   #2f9e58;

  /* ---- Semantic roles (light) -------------------------------------------- */
  --color-bg:            var(--stone-50);
  --color-bg-sunken:     var(--stone-100);
  --color-surface:       var(--stone-0);
  --color-surface-2:     var(--stone-25);
  --color-surface-hover: var(--stone-100);
  --color-border:        var(--stone-200);
  --color-border-strong: var(--stone-300);
  --color-text:          #17201e;
  --color-text-muted:    var(--stone-600);
  --color-text-subtle:   var(--stone-500);
  --color-text-inverse:  #ffffff;

  --color-primary:        var(--brand-600);
  --color-primary-hover:  var(--brand-700);
  --color-primary-soft:   var(--brand-50);
  --color-primary-ink:    var(--brand-800);
  --color-on-primary:     #ffffff;

  --color-donate:        var(--accent-500);
  --color-donate-hover:  var(--accent-400);
  --color-on-donate:     var(--accent-ink);

  --color-success:      #1f8f52;
  --color-success-soft: #e7f5ec;
  --color-warning:      #b86e00;
  --color-warning-soft: #fdf3e1;
  --color-danger:       #d13a3a;
  --color-danger-soft:  #fdecec;
  --color-info:         #2f63d0;
  --color-info-soft:    #eaf0fc;

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent);

  /* ---- Typography -------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-button:  var(--font-sans);
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  /* Size · leading · tracking move together (large = tight, small = open) */
  --text-display: clamp(2.75rem, 1.6rem + 4.6vw, 5rem);
  --lh-display: 1.02;  --tr-display: -0.03em;
  --text-h1: clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem);
  --lh-h1: 1.08;       --tr-h1: -0.025em;
  --text-h2: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
  --lh-h2: 1.12;       --tr-h2: -0.02em;
  --text-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --lh-h3: 1.2;        --tr-h3: -0.015em;
  --text-h4: 1.1875rem;
  --lh-h4: 1.3;        --tr-h4: -0.01em;
  --text-lg: 1.125rem; --lh-lg: 1.6;
  --text-md: 1rem;     --lh-md: 1.6;
  --text-sm: 0.875rem; --lh-sm: 1.5;
  --text-xs: 0.75rem;  --lh-xs: 1.4;  --tr-xs: 0.02em;
  --text-eyebrow: 0.75rem; --tr-eyebrow: 0.12em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Space (4px base, rem so it scales with user text size) ------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);

  --container: 76rem;
  --container-narrow: 48rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  /* ---- Shape ------------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --radius-button: var(--radius-full);
  --radius-card: var(--radius-lg);
  --radius-input: var(--radius-sm);

  /* ---- Depth (bigger surface = deeper shadow) ---------------------------- */
  --shadow-xs: 0 1px 2px rgb(23 32 30 / 0.06);
  --shadow-sm: 0 1px 2px rgb(23 32 30 / 0.05), 0 2px 6px rgb(23 32 30 / 0.05);
  --shadow-md: 0 2px 4px rgb(23 32 30 / 0.04), 0 8px 20px rgb(23 32 30 / 0.07);
  --shadow-lg: 0 4px 8px rgb(23 32 30 / 0.04), 0 20px 44px rgb(23 32 30 / 0.12);
  --shadow-xl: 0 8px 16px rgb(23 32 30 / 0.06), 0 32px 72px rgb(23 32 30 / 0.18);
  --shadow-donate: 0 6px 18px color-mix(in srgb, var(--accent-600) 35%, transparent);

  /* ---- Materials (translucent chrome) ------------------------------------ */
  --material-bar: rgb(250 248 245 / 0.72);
  --material-bar-edge: rgb(255 255 255 / 0.6);
  --material-thick: rgb(255 255 255 / 0.82);
  --material-blur: blur(20px) saturate(180%);
  --scrim: rgb(16 15 14 / 0.42);

  /* ---- Motion ------------------------------------------------------------ */
  /* Critically damped spring (no overshoot) — the default for UI */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  /* Light bounce — only after a gesture that carried momentum */
  --ease-bounce: linear(0, 0.063 3.1%, 0.25 6.6%, 0.76 14%, 0.94 18%, 1.04 22.4%, 1.075 26.8%, 1.07 31.6%, 1.02 40%, 0.995 49%, 1.002 64%, 1);
  --ease-out: cubic-bezier(0.25, 0.8, 0.3, 1);
  --dur-press: 100ms;
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 520ms;

  --z-sticky: 50;
  --z-header: 100;
  --z-overlay: 400;
  --z-toast: 500;

  color-scheme: light;
}

/* ---- Dark scheme (dashboards, user preference) ---------------------------- */
[data-theme="dark"] {
  --color-bg:            #0f1413;
  --color-bg-sunken:     #0a0e0d;
  --color-surface:       #161c1b;
  --color-surface-2:     #1b2221;
  --color-surface-hover: #212a28;
  --color-border:        #28312f;
  --color-border-strong: #36413e;
  --color-text:          #eef2f0;
  --color-text-muted:    #a6b0ac;
  --color-text-subtle:   #7f8985;
  --color-text-inverse:  #0f1413;

  --color-primary:       var(--brand-400);
  --color-primary-hover: var(--brand-300);
  --color-primary-soft:  color-mix(in srgb, var(--brand-500) 16%, transparent);
  --color-primary-ink:   var(--brand-200);
  --color-on-primary:    var(--brand-950);

  --color-success-soft: rgb(31 143 82 / 0.16);
  --color-warning-soft: rgb(184 110 0 / 0.18);
  --color-danger-soft:  rgb(209 58 58 / 0.16);
  --color-info-soft:    rgb(47 99 208 / 0.18);
  --color-success: #4cc787;
  --color-warning: #f0b44c;
  --color-danger:  #f07171;
  --color-info:    #7aa2f7;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 2px 6px rgb(0 0 0 / 0.35), 0 10px 24px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 4px 10px rgb(0 0 0 / 0.35), 0 24px 48px rgb(0 0 0 / 0.4);

  --material-bar: rgb(15 20 19 / 0.7);
  --material-bar-edge: rgb(255 255 255 / 0.06);
  --material-thick: rgb(22 28 27 / 0.86);
  --scrim: rgb(0 0 0 / 0.6);

  color-scheme: dark;
}

/* ---- Accessibility preferences --------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
  :root, [data-theme="dark"] {
    --material-bar: var(--color-surface);
    --material-thick: var(--color-surface);
    --material-blur: none;
  }
}
@media (prefers-contrast: more) {
  :root {
    --color-border: var(--stone-400);
    --color-text-muted: var(--stone-700);
    --material-bar: var(--color-surface);
  }
}