/* ============================================
   CAPTIONED — GLOBALS.CSS
   Design system. Every colour, font, spacing.
   Mobile-first. Never touch after setup.
   ============================================ */

/* ============================================
   GOOGLE FONTS IMPORT
   ============================================ */
   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

   /* ============================================
      CSS VARIABLES — THE ENTIRE DESIGN SYSTEM
      Change one value here, updates everywhere.
      ============================================ */
   :root {
   
     /* COLOURS — Forest / Deep Moss */
     --bg:           #F0F2EE;   /* page background — light green-grey */
     --bg-card:      #F0F2EE;   /* card + input background — same as page */
     --bg-nav:       #F0F2EE;   /* nav background — matches page */
     --accent:       #3A5C3A;   /* forest green — buttons, labels, highlights */
     --accent-light: #CCDACC;   /* borders, dividers, pill borders */
     --accent-hover: #2E4A2E;   /* darker green for button hover */
     --ink:          #161C16;   /* primary text — near black with green undertone */
     --ink-muted:    rgba(22,28,22,0.5);  /* 50% — labels, secondary text */
     --ink-faint:    rgba(22,28,22,0.25); /* 25% — placeholders */
     --border:       #CCDACC;   /* default border colour */
     --border-focus: #3A5C3A;   /* border on focused inputs */
   
     /* LOCKED / DISABLED STATE */
     --locked-bg:    #F0F2EE;
     --locked-text:  #B0BCB0;
     --locked-border:#DDE5DD;
   
     /* SUCCESS / ERROR */
     --success:      #3A5C3A;
     --error:        #8B3A3A;
     --error-bg:     #F9F0F0;
   
     /* FONTS */
     --font-heading: 'Cormorant Garamond', Georgia, serif;
     --font-body:    'DM Sans', system-ui, sans-serif;
   
     /* FONT SIZES — mobile first */
     --text-xs:      11px;
     --text-sm:      13px;
     --text-base:    15px;
     --text-md:      17px;
     --text-lg:      22px;
     --text-xl:      28px;
     --text-2xl:     36px;
     --text-3xl:     48px;
   
     /* SPACING */
     --space-xs:     4px;
     --space-sm:     8px;
     --space-md:     16px;
     --space-lg:     24px;
     --space-xl:     40px;
     --space-2xl:    64px;
   
     /* BORDER RADIUS */
     --radius-sm:    4px;
     --radius-md:    4px;   /* inputs, pills — nearly square */
     --radius-lg:    6px;   /* cards */
     --radius-xl:    8px;   /* modal */
     --radius-pill:  50px;  /* only for counter badge, toggle */
   
     /* TRANSITIONS */
     --transition:   all 0.18s ease;
   
     /* MAX WIDTHS */
     --max-form:     520px;
     --max-content:  720px;
     --max-wide:     1080px;
   
     /* NAV HEIGHT */
     --nav-height:   60px;
   }
   
   /* ============================================
      RESET
      ============================================ */
   *,
   *::before,
   *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   html {
     font-size: 16px;
     -webkit-text-size-adjust: 100%;
     scroll-behavior: smooth;
   }
   
   body {
     font-family: var(--font-body);
     font-weight: 300;
     font-size: var(--text-base);
     color: var(--ink);
     background-color: var(--bg);
     line-height: 1.6;
     min-height: 100vh;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   /* ============================================
      TYPOGRAPHY
      ============================================ */
   h1, h2, h3, h4, h5, h6 {
     font-family: var(--font-heading);
     font-weight: 400;
     line-height: 1.15;
     letter-spacing: -0.02em;
     color: var(--ink);
   }
   
   h1 { font-size: var(--text-2xl); }
   h2 { font-size: var(--text-xl); }
   h3 { font-size: var(--text-lg); }
   h4 { font-size: var(--text-md); }
   
   h1 em, h2 em, h3 em {
     font-style: italic;
     color: var(--accent);
   }
   
   p {
     font-family: var(--font-body);
     font-weight: 300;
     font-size: var(--text-base);
     line-height: 1.7;
     color: var(--ink);
   }
   
   a {
     color: var(--accent);
     text-decoration: none;
     transition: var(--transition);
   }
   a:hover {
     opacity: 0.75;
   }
   
   .label {
     font-family: var(--font-body);
     font-size: var(--text-xs);
     font-weight: 400;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--ink-muted);
   }
   
   .text-muted {
     color: var(--ink-muted);
   }
   
   /* ============================================
      LAYOUT UTILITIES
      ============================================ */
   .container {
     width: 100%;
     max-width: var(--max-content);
     margin: 0 auto;
     padding: 0 var(--space-md);
   }
   
   .container--form {
     width: 100%;
     max-width: var(--max-form);
     margin: 0 auto;
     padding: 0 var(--space-md);
   }
   
   .container--wide {
     width: 100%;
     max-width: var(--max-wide);
     margin: 0 auto;
     padding: 0 var(--space-md);
   }
   
   .stack  { display: flex; flex-direction: column; }
   .cluster { display: flex; flex-wrap: wrap; align-items: center; }
   .centre { display: flex; align-items: center; justify-content: center; }
   .between { display: flex; align-items: center; justify-content: space-between; }
   
   /* ============================================
      SPACING UTILITIES
      ============================================ */
   .mt-sm  { margin-top: var(--space-sm); }
   .mt-md  { margin-top: var(--space-md); }
   .mt-lg  { margin-top: var(--space-lg); }
   .mt-xl  { margin-top: var(--space-xl); }
   .mb-sm  { margin-bottom: var(--space-sm); }
   .mb-md  { margin-bottom: var(--space-md); }
   .mb-lg  { margin-bottom: var(--space-lg); }
   .mb-xl  { margin-bottom: var(--space-xl); }
   .gap-sm { gap: var(--space-sm); }
   .gap-md { gap: var(--space-md); }
   .gap-lg { gap: var(--space-lg); }
   
   /* ============================================
      FORM ELEMENTS — BASE STYLES
      ============================================ */
   input[type="text"],
   input[type="email"],
   input[type="password"],
   textarea,
   select {
     width: 100%;
     font-family: var(--font-body);
     font-size: 16px;
     font-weight: 300;
     color: var(--ink);
     background: transparent;
     border: none;
     border-bottom: 1px solid var(--border);
     border-radius: 0;
     padding: 10px 0;
     outline: none;
     appearance: none;
     -webkit-appearance: none;
     transition: var(--transition);
     line-height: 1.5;
   }
   
   input:focus,
   textarea:focus,
   select:focus {
     border-bottom-color: var(--border-focus);
     background: transparent;
   }
   
   input::placeholder,
   textarea::placeholder {
     color: var(--ink-faint);
     font-weight: 300;
   }
   
   textarea {
     resize: none;
     min-height: 72px;
   }
   
   /* Select arrow */
   .select-wrap {
     position: relative;
   }
   .select-wrap::after {
     content: '';
     position: absolute;
     right: 4px;
     top: 50%;
     transform: translateY(-50%);
     width: 0;
     height: 0;
     border-left: 4px solid transparent;
     border-right: 4px solid transparent;
     border-top: 5px solid var(--ink-muted);
     pointer-events: none;
   }
   
   /* ============================================
      LOCKED / DISABLED FIELDS
      ============================================ */
   .field--locked input,
   .field--locked textarea,
   .field--locked select,
   .field--locked .tone-grid {
     background: var(--locked-bg);
     border-color: var(--locked-border);
     color: var(--locked-text);
     cursor: not-allowed;
     pointer-events: none;
   }
   
   .field--locked .field-label {
     color: var(--locked-text);
   }
   
   .upgrade-nudge {
     font-size: var(--text-xs);
     color: var(--ink-muted);
     margin-top: var(--space-xs);
     font-weight: 300;
   }
   
   .upgrade-nudge a {
     color: var(--accent);
     font-weight: 400;
     text-decoration: underline;
     text-underline-offset: 2px;
   }
   
   /* ============================================
      DIVIDER
      ============================================ */
   .divider {
     height: 1px;
     background: var(--border);
     margin: var(--space-xl) 0;
   }
   
   /* Section spacer — replaces labelled divider */
   .section-gap {
     margin-top: var(--space-xl);
   }
   
   /* ============================================
      SCROLLBAR
      ============================================ */
   ::-webkit-scrollbar { width: 6px; height: 6px; }
   ::-webkit-scrollbar-track { background: var(--bg); }
   ::-webkit-scrollbar-thumb { background: var(--accent-light); border-radius: var(--radius-pill); }
   ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
   
   ::selection {
     background: var(--accent-light);
     color: var(--ink);
   }
   
   /* ============================================
      RESPONSIVE
      ============================================ */
   @media (min-width: 768px) {
     h1 { font-size: var(--text-3xl); }
     h2 { font-size: var(--text-2xl); }
     h3 { font-size: var(--text-xl); }
   
     .container,
     .container--form,
     .container--wide {
       padding: 0 var(--space-xl);
     }
   }
   
   /* ============================================
      UTILITY
      ============================================ */
   .hidden  { display: none !important; }
   .visible { display: block !important; }
   .sr-only {
     position: absolute;
     width: 1px; height: 1px;
     padding: 0; margin: -1px;
     overflow: hidden;
     clip: rect(0,0,0,0);
     white-space: nowrap;
     border: 0;
   }
   
   /* ============================================
      ANIMATIONS
      ============================================ */
   @keyframes fadeUp {
     from { opacity: 0; transform: translateY(12px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   .fade-up { animation: fadeUp 0.35s ease forwards; }
   .fade-up:nth-child(1) { animation-delay: 0.05s; }
   .fade-up:nth-child(2) { animation-delay: 0.12s; }
   .fade-up:nth-child(3) { animation-delay: 0.19s; }
   .fade-up:nth-child(4) { animation-delay: 0.26s; }
   .fade-up:nth-child(5) { animation-delay: 0.33s; }
   
   @keyframes pulse {
     0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
     40%           { opacity: 1;   transform: scale(1); }
   }
   
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after {
       animation-duration: 0.01ms !important;
       transition-duration: 0.01ms !important;
     }

    }