/* =============================================================
   SWARNATHULASI HOMESTAY — DESIGN TOKENS
   Single source of truth for all visual values.
   No component should use a color, size, or shadow not listed here.
   ============================================================= */

:root {

  /* ----------------------------------------------------------
     COLOR PALETTE
     ---------------------------------------------------------- */

  /* Backgrounds */
  --c-bg:          #FDFBF7;   /* warm off-white page background */
  --c-surface:     #FFFFFF;   /* card / modal / input surfaces */
  --c-surface-2:   #F7F5F1;   /* subtle section tint (alternating sections) */

  /* Borders */
  --c-border:      #E8E3DA;   /* default dividers, input borders */
  --c-border-strong: #C9C2B6; /* emphasized separators */

  /* Text */
  --c-text:        #1A1A1B;   /* primary text */
  --c-text-muted:  #6B6660;   /* secondary / helper text */
  --c-text-faint:  #9E9A95;   /* placeholder, disabled */

  /* Accent — sage green, one color, used sparingly */
  --c-accent:      #5C7A6E;   /* primary links, active states — coastal sage */
  --c-accent-hover:#3D5A51;   /* hover / pressed */
  --c-accent-light:#EEF3F0;   /* tinted background for chips, badges */
  --c-accent-mid:  rgba(92, 122, 110, 0.15); /* soft tint for icon containers */

  /* Terracotta — primary CTA colour (replaces gold) */
  --c-terra:       #C4714A;   /* laterite soil of coastal AP */
  --c-terra-dk:    #A35A36;   /* CTA hover / pressed */
  --c-terra-light: rgba(196, 113, 74, 0.10); /* tinted badge background */

  /* Status */
  --c-success:     #2E7D4F;
  --c-success-bg:  #F0FBF4;
  --c-warning:     #92600E;
  --c-warning-bg:  #FFF8EC;
  --c-danger:      #C62828;
  --c-danger-bg:   #FFF5F5;
  --c-info:        #1558A8;
  --c-info-bg:     #EEF4FF;

  /* Dark surface (admin sidebar, about section) */
  --c-dark:        #1F2422;
  --c-dark-2:      #2C3530;

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */

  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Scale — use only these, nowhere else */
  --text-xs:      0.75rem;    /* 12px — labels, badges */
  --text-sm:      0.875rem;   /* 14px — helper text, table cells */
  --text-base:    1rem;       /* 16px — body copy */
  --text-lg:      1.125rem;   /* 18px — card titles, form section headers */
  --text-xl:      1.375rem;   /* 22px — sub-section headings */
  --text-2xl:     1.75rem;    /* 28px — page sub-heads */
  --text-display: 2.5rem;     /* 40px — section headings */
  --text-hero:    clamp(2rem, 5vw, 3.25rem); /* 32–52px — hero h1 */

  /* Weights */
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-relaxed:1.8;

  /* ----------------------------------------------------------
     SPACING (8-point grid)
     ---------------------------------------------------------- */

  --sp-1:   0.25rem;   /* 4px */
  --sp-2:   0.5rem;    /* 8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-24:  6rem;      /* 96px */

  /* Section vertical rhythm */
  --section-py: clamp(3rem, 6vw, 5rem);

  /* Container */
  --container-max: 1280px;
  --container-px:  clamp(1rem, 4vw, 1.5rem);

  /* ----------------------------------------------------------
     BORDER RADIUS
     ---------------------------------------------------------- */

  --radius-sm:   0.375rem;  /* 6px — badges, small chips */
  --radius:      0.625rem;  /* 10px — inputs */
  --radius-md:   0.875rem;  /* 14px — cards */
  --radius-lg:   1.25rem;   /* 20px — modals, large cards */
  --radius-xl:   1.5rem;    /* 24px — hero images */
  --radius-full: 9999px;    /* pills, avatars */

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */

  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 12px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
  --shadow-xl: 0 32px 64px rgba(0,0,0,.14);

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */

  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --duration:   200ms;
  --duration-lg:350ms;

  /* ----------------------------------------------------------
     Z-INDEX STACK
     ---------------------------------------------------------- */

  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}