/* =============================================================================
   NONPROFIT PLATFORM — THEME VARIABLES
   ─────────────────────────────────────────────────────────────────────────────
   This is the ONLY file you need to edit to fully restyle the platform for a
   new client. Every color, font, radius, shadow, and spacing token lives here.
   
   HOW TO USE:
   1. Duplicate this file and rename it: theme-[clientname].css
   2. Update the variables below to match the client's brand
   3. Replace the <link> in base.php to point to the new theme file
   4. Done — the entire platform adapts automatically.
   ============================================================================= */

:root {

  /* ── BRAND COLORS ─────────────────────────────────────────────────────────
     Define your 3-color brand palette here.
     Primary: main brand color (buttons, links, accents)
     Secondary: supporting color (hover states, highlights)
     Accent: pop color (CTAs, badges, special elements)
  ─────────────────────────────────────────────────────────────────────────── */
  --color-primary:          #8B2252;   /* Deep rose/magenta — change for each client */
  --color-primary-dark:     #6B1A3E;
  --color-primary-light:    #B5486E;
  --color-primary-xlight:   #F7EBF1;
  --color-primary-rgb:      139, 34, 82; /* For rgba() usage */

  --color-secondary:        #2C5F8A;   /* Supporting navy/teal */
  --color-secondary-dark:   #1E4468;
  --color-secondary-light:  #4A84B5;
  --color-secondary-xlight: #EBF2F9;

  --color-accent:           #E8A020;   /* Gold accent — calls to action */
  --color-accent-dark:      #C4871A;
  --color-accent-light:     #F5C55A;
  --color-accent-xlight:    #FDF6E3;

  /* ── NEUTRALS ─────────────────────────────────────────────────────────────
     Full gray scale — rarely need changing
  ─────────────────────────────────────────────────────────────────────────── */
  --color-white:            #FFFFFF;
  --color-off-white:        #FAFAFA;
  --color-surface:          #F5F5F7;
  --color-gray-100:         #F0F0F2;
  --color-gray-200:         #E2E2E6;
  --color-gray-300:         #CACACE;
  --color-gray-400:         #ADADB3;
  --color-gray-500:         #8C8C94;
  --color-gray-600:         #6B6B73;
  --color-gray-700:         #4A4A52;
  --color-gray-800:         #2E2E36;
  --color-gray-900:         #1A1A22;
  --color-black:            #0D0D14;

  /* ── SEMANTIC COLORS ──────────────────────────────────────────────────────
     States: success, warning, error, info
  ─────────────────────────────────────────────────────────────────────────── */
  --color-success:          #1A7A4A;
  --color-success-light:    #E8F7EF;
  --color-warning:          #D4800A;
  --color-warning-light:    #FEF6E4;
  --color-error:            #C62B2B;
  --color-error-light:      #FDEAEA;
  --color-info:             #1A5FA8;
  --color-info-light:       #E5F0FB;

  /* ── TEXT COLORS ──────────────────────────────────────────────────────────  */
  --color-text-primary:     #1A1A22;
  --color-text-secondary:   #4A4A52;
  --color-text-tertiary:    #6B6B73;
  --color-text-disabled:    #ADADB3;
  --color-text-inverse:     #FFFFFF;
  --color-text-link:        var(--color-primary);
  --color-text-link-hover:  var(--color-primary-dark);

  /* ── BORDER COLORS ────────────────────────────────────────────────────────  */
  --color-border:           #E2E2E6;
  --color-border-strong:    #CACACE;
  --color-border-focus:     var(--color-primary);

  /* ── BACKGROUND COLORS ────────────────────────────────────────────────────  */
  --color-bg-body:          #FFFFFF;
  --color-bg-surface:       #F5F5F7;
  --color-bg-elevated:      #FFFFFF;
  --color-bg-overlay:       rgba(13, 13, 20, 0.6);

  /* ── TYPOGRAPHY ───────────────────────────────────────────────────────────
     Google Fonts used by default. Change font names here and update the
     @import in base.css to load different fonts.
     
     Display: large headings, hero text
     Body: paragraphs, UI text
     Mono: code, data, form inputs
  ─────────────────────────────────────────────────────────────────────────── */
  --font-display:           'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:              'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:              'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* ── TYPE SCALE ───────────────────────────────────────────────────────────
     Fluid type using clamp() — scales smoothly between mobile and desktop
  ─────────────────────────────────────────────────────────────────────────── */
  --text-xs:    0.75rem;      /* 12px */
  --text-sm:    0.875rem;     /* 14px */
  --text-base:  1rem;         /* 16px */
  --text-lg:    1.125rem;     /* 18px */
  --text-xl:    1.25rem;      /* 20px */
  --text-2xl:   1.5rem;       /* 24px */
  --text-3xl:   clamp(1.5rem,  3vw, 2rem);       /* 24–32px */
  --text-4xl:   clamp(2rem,    4vw, 2.75rem);    /* 32–44px */
  --text-5xl:   clamp(2.5rem,  5vw, 3.5rem);     /* 40–56px */
  --text-6xl:   clamp(3rem,    6vw, 4.5rem);     /* 48–72px */
  --text-hero:  clamp(3.5rem,  8vw, 6rem);       /* 56–96px */

  /* ── FONT WEIGHTS ─────────────────────────────────────────────────────────  */
  --weight-light:     300;
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* ── LINE HEIGHTS ─────────────────────────────────────────────────────────  */
  --leading-tight:    1.1;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.6;
  --leading-loose:    1.8;

  /* ── LETTER SPACING ───────────────────────────────────────────────────────  */
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.15em;

  /* ── SPACING SCALE ────────────────────────────────────────────────────────
     8pt grid — every spacing value is a multiple of 4 or 8
  ─────────────────────────────────────────────────────────────────────────── */
  --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 */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */

  /* ── SECTION SPACING ──────────────────────────────────────────────────────
     Consistent vertical rhythm between page sections
  ─────────────────────────────────────────────────────────────────────────── */
  --section-sm:   clamp(3rem, 6vw, 5rem);
  --section-md:   clamp(4rem, 8vw, 7rem);
  --section-lg:   clamp(5rem, 10vw, 9rem);
  --section-xl:   clamp(6rem, 12vw, 11rem);

  /* ── BORDER RADIUS ────────────────────────────────────────────────────────
     Change --radius-base to shift the entire platform from rounded to sharp
  ─────────────────────────────────────────────────────────────────────────── */
  --radius-sm:    4px;
  --radius-base:  8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-2xl:   32px;
  --radius-full:  9999px;

  /* ── SHADOWS ──────────────────────────────────────────────────────────────  */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:    0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:    0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:    0 16px 48px rgba(0,0,0,0.14);
  --shadow-2xl:   0 24px 64px rgba(0,0,0,0.18);
  --shadow-inset: inset 0 1px 3px rgba(0,0,0,0.08);
  --shadow-focus: 0 0 0 3px rgba(var(--color-primary-rgb), 0.25);
  --shadow-card:  0 2px 8px rgba(0,0,0,0.07), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.1), 0 16px 40px rgba(0,0,0,0.1);

  /* ── TRANSITIONS ──────────────────────────────────────────────────────────  */
  --ease-default:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:      cubic-bezier(0.22, 1, 0.36, 1);

  --duration-fast:    120ms;
  --duration-base:    200ms;
  --duration-slow:    350ms;
  --duration-slower:  500ms;
  --duration-page:    700ms;

  --transition-base:  all var(--duration-base) var(--ease-default);
  --transition-color: color var(--duration-fast) var(--ease-out), 
                      background-color var(--duration-fast) var(--ease-out),
                      border-color var(--duration-fast) var(--ease-out);
  --transition-transform: transform var(--duration-base) var(--ease-default);
  --transition-shadow: box-shadow var(--duration-base) var(--ease-default);

  /* ── LAYOUT ───────────────────────────────────────────────────────────────  */
  --container-xs:     480px;
  --container-sm:     640px;
  --container-md:     768px;
  --container-lg:     1024px;
  --container-xl:     1280px;
  --container-2xl:    1440px;
  --container-max:    1600px;

  --container-padding-x:    clamp(1rem, 4vw, 2rem);
  --container-padding-y:    var(--section-md);

  /* ── HEADER ───────────────────────────────────────────────────────────────  */
  --header-height:          72px;
  --header-height-scrolled: 60px;
  --header-bg:              rgba(255,255,255,0.95);
  --header-bg-scrolled:     rgba(255,255,255,0.98);
  --header-border:          1px solid var(--color-border);
  --header-shadow-scrolled: var(--shadow-md);
  --header-backdrop:        blur(12px) saturate(180%);

  /* ── HERO ─────────────────────────────────────────────────────────────────  */
  --hero-min-height:        90vh;
  --hero-overlay:           linear-gradient(135deg, rgba(var(--color-primary-rgb),0.85) 0%, rgba(44,95,138,0.7) 100%);

  /* ── CARDS ────────────────────────────────────────────────────────────────  */
  --card-bg:                var(--color-white);
  --card-border:            1px solid var(--color-border);
  --card-radius:            var(--radius-lg);
  --card-padding:           var(--space-6);
  --card-shadow:            var(--shadow-card);
  --card-shadow-hover:      var(--shadow-card-hover);

  /* ── BUTTONS ──────────────────────────────────────────────────────────────  */
  --btn-height-sm:          36px;
  --btn-height-md:          44px;
  --btn-height-lg:          52px;
  --btn-height-xl:          60px;
  --btn-padding-x-sm:       var(--space-4);
  --btn-padding-x-md:       var(--space-6);
  --btn-padding-x-lg:       var(--space-8);
  --btn-font-size:          var(--text-base);
  --btn-font-weight:        var(--weight-semibold);
  --btn-radius:             var(--radius-base);
  --btn-radius-pill:        var(--radius-full);

  /* ── FORMS ────────────────────────────────────────────────────────────────  */
  --input-height:           48px;
  --input-height-sm:        38px;
  --input-padding-x:        var(--space-4);
  --input-bg:               var(--color-white);
  --input-bg-focus:         var(--color-white);
  --input-border:           1px solid var(--color-border-strong);
  --input-border-focus:     1px solid var(--color-primary);
  --input-border-error:     1px solid var(--color-error);
  --input-radius:           var(--radius-base);
  --input-shadow-focus:     var(--shadow-focus);
  --label-color:            var(--color-gray-700);
  --label-size:             var(--text-sm);
  --label-weight:           var(--weight-medium);

  /* ── NAVIGATION ───────────────────────────────────────────────────────────  */
  --nav-link-color:         var(--color-gray-700);
  --nav-link-color-hover:   var(--color-primary);
  --nav-link-color-active:  var(--color-primary);
  --nav-link-weight:        var(--weight-medium);
  --nav-link-size:          var(--text-base);
  --nav-dropdown-bg:        var(--color-white);
  --nav-dropdown-shadow:    var(--shadow-xl);
  --nav-dropdown-radius:    var(--radius-md);

  /* ── BADGES & TAGS ────────────────────────────────────────────────────────  */
  --badge-padding:          0.2em 0.65em;
  --badge-radius:           var(--radius-full);
  --badge-font-size:        var(--text-xs);
  --badge-font-weight:      var(--weight-semibold);

  /* ── TABLE ────────────────────────────────────────────────────────────────  */
  --table-bg:               var(--color-white);
  --table-bg-alt:           var(--color-gray-100);
  --table-border:           var(--color-border);
  --table-header-bg:        var(--color-gray-100);
  --table-header-color:     var(--color-text-secondary);
  --table-row-hover:        var(--color-primary-xlight);

  /* ── ADMIN SIDEBAR ────────────────────────────────────────────────────────  */
  --sidebar-width:          260px;
  --sidebar-width-collapsed: 72px;
  --sidebar-bg:             var(--color-gray-900);
  --sidebar-text:           rgba(255,255,255,0.75);
  --sidebar-text-active:    #FFFFFF;
  --sidebar-active-bg:      rgba(255,255,255,0.12);
  --sidebar-active-accent:  var(--color-primary-light);
  --sidebar-icon-color:     rgba(255,255,255,0.5);
  --sidebar-icon-active:    var(--color-primary-light);

  /* ── Z-INDEX SCALE ────────────────────────────────────────────────────────  */
  --z-below:        -1;
  --z-base:         0;
  --z-raised:       10;
  --z-dropdown:     100;
  --z-sticky:       200;
  --z-fixed:        300;
  --z-overlay:      400;
  --z-modal:        500;
  --z-toast:        600;
  --z-tooltip:      700;
  --z-top:          9999;

  /* ── GRADIENTS ────────────────────────────────────────────────────────────  */
  --gradient-primary:   linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  --gradient-accent:    linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  --gradient-surface:   linear-gradient(180deg, var(--color-white) 0%, var(--color-surface) 100%);
  --gradient-hero:      var(--hero-overlay);

  /* ── MOTION PREFERENCES ────────────────────────────────────────────────── 
     Respect user's OS preference for reduced motion
  ─────────────────────────────────────────────────────────────────────────── */
  --motion-reduce:    0;  /* Set to 1 if reduced motion is preferred */
}

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    0ms;
    --duration-base:    0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
    --duration-page:    0ms;
    --motion-reduce:    1;
  }
}

/* Dark mode support — can be enabled per-client */
@media (prefers-color-scheme: dark) {
  :root.dark-mode-auto {
    --color-bg-body:        #0D0D14;
    --color-bg-surface:     #1A1A22;
    --color-bg-elevated:    #22222E;
    --color-text-primary:   #F0F0F2;
    --color-text-secondary: #ADADB3;
    --color-border:         #2E2E36;
    --color-border-strong:  #4A4A52;
    --card-bg:              #1A1A22;
    --header-bg:            rgba(13,13,20,0.95);
    --header-bg-scrolled:   rgba(13,13,20,0.98);
  }
}