/**
 * Annai Nursing Home — Design System Tokens
 * Upgraded Visual Design: Modern & Premium Design Reference (Figma)
 *
 * Summary of Changes:
 * 1. Palette:
 *    - Primary (Deep Teal): #0F4C4A (brand header, primary buttons, cta bands)
 *    - Accent (Emerald): #1E8A72 (status badges, focus rings, highlights)
 *    - Secondary Accent (Warm Gold): #C89B3C (secondary buttons, journey markers, ornaments)
 *    - Soft Blush Surface: #F3E7DE (feature sections, care pathways, tint bands)
 *    - Ivory Background: #FBF9F6 (page & body background)
 *    - Charcoal Text: #20272B (headings & body text with high WCAG AA contrast)
 *    - Muted Charcoal: #536269 (subtitles, secondary copy, captions)
 *    - Raised Surface: #FFFFFF (cards, elevated surfaces)
 *    - Hairline Border: #E7E2DA (delicate warm border)
 * 2. Type Scale:
 *    - H1: 40px Bold (line-height 48px)
 *    - H2: 28px Semi Bold (line-height 36px)
 *    - H3: 20px Semi Bold (line-height 28px)
 *    - Body: 16px Regular (line-height 26px)
 *    - Caption: 13px Regular (line-height 18px)
 *    - Fonts: Inter, Work Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
 *      with Playfair Display for editorial headlines
 * 3. Buttons:
 *    - Fully rounded pill (border-radius: 999px)
 *    - Generous horizontal padding (~28px)
 *    - Primary: Deep Teal fill (#0F4C4A) / Ivory text (#FBF9F6)
 *    - Secondary: Warm Gold fill (#C89B3C) / Charcoal text (#20272B)
 *    - Outline: Deep Teal border (#0F4C4A), Deep Teal text (#0F4C4A), transparent fill
 * 4. Cards:
 *    - White background (#FFFFFF)
 *    - 20px corner radius (border-radius: 20px)
 *    - Soft drop shadow: 0px 8px 24px rgba(15, 76, 74, 0.12)
 *    - Generous internal padding (24px)
 * 5. Spacing & Transitions:
 *    - 4px baseline scale (4, 8, 12, 16, 24, 32, 48, 64, 96px)
 *    - Smooth 200-250ms ease transitions for buttons, cards, and interactive elements
 */

:root {
  /* --------------------------------------------------------------------------
   * 1. Figma Color Palette
   * -------------------------------------------------------------------------- */
  /* Primary & Brand */
  --color-brand-primary: #0F4C4A;        /* Deep Teal: Primary brand headers & buttons */
  --color-primary: #0F4C4A;              /* Alias */
  --color-brand-primary-hover: #145E5C;  /* Richer teal hover */
  --color-brand-primary-active: #0B3A39; /* Darker teal active */
  --color-brand-primary-on: #FBF9F6;     /* Ivory text on primary teal */

  /* Accents */
  --color-accent-emerald: #1E8A72;       /* Emerald: Key visual accent & highlights */
  --color-accent: #1E8A72;               /* Alias */
  --color-accent-emerald-hover: #18735F;

  --color-accent-gold: #C89B3C;          /* Warm Gold: Secondary buttons & timeline */
  --color-accent-gold-hover: #B58B32;    /* Darker warm gold hover */
  --color-accent-gold-on: #20272B;       /* Charcoal text on gold */
  --color-accent-gold-soft: #EFE4CC;     /* Light gold tint */

  /* Surfaces & Backgrounds */
  --color-surface: #FBF9F6;              /* Ivory Background: Main canvas */
  --color-surface-raised: #FFFFFF;       /* Pure White: Cards & elevated sheets */
  --color-surface-blush: #F3E7DE;        /* Soft Blush: Surface/highlight section backgrounds */
  --color-surface-band-ivory: #FBF9F6;
  --color-surface-band-sage: #F3E7DE;    /* Re-skinned to warm blush highlight */
  --color-surface-band-white: #FFFFFF;
  --color-surface-band-forest: #0F4C4A;  /* Deep Teal Band */

  /* Typography & Ink */
  --color-ink: #20272B;                  /* Charcoal Text: High contrast headings & body */
  --color-text-charcoal: #20272B;
  --color-ink-muted: #536269;            /* Muted Charcoal: Supporting copy & captions (WCAG AA > 4.5:1) */
  --color-ink-on-dark: #FBF9F6;          /* Ivory on dark teal */
  --color-ink-muted-on-dark: #D1DFDD;    /* Soft teal on dark teal */

  /* Borders & Dividers */
  --color-border-hairline: #E7E2DA;      /* Subtle warm border */

  /* Functional & Status Signals */
  --color-signal-urgent: #B5502E;        /* Warm Terracotta: Emergency & error */
  --color-signal-urgent-on: #FFFFFF;
  --color-signal-success: #1E8A72;       /* Emerald */
  --color-signal-warning: #C89B3C;       /* Warm Gold */

  /* Interactive Links */
  --color-link: var(--color-brand-primary);
  --color-link-hover: var(--color-accent-emerald);

  /* --------------------------------------------------------------------------
   * 2. Typography Scale (Figma Reference)
   * -------------------------------------------------------------------------- */
  --font-display: "Playfair Display", Georgia, serif;
  --font-heading: "Inter", "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Cormorant Garamond", Georgia, serif;
  --font-tamil: "Catamaran", "Work Sans", sans-serif;

  /* Strict Figma Type Scale */
  --text-h1: 40px;
  --text-h1-lh: 48px;
  --text-h1-weight: 700;

  --text-h2: 28px;
  --text-h2-lh: 36px;
  --text-h2-weight: 600;

  --text-h3: 20px;
  --text-h3-lh: 28px;
  --text-h3-weight: 600;

  --text-body: 16px;
  --text-body-lh: 26px;
  --text-body-weight: 400;

  --text-caption: 13px;
  --text-caption-lh: 18px;
  --text-caption-weight: 400;

  /* --------------------------------------------------------------------------
   * 3. Spacing Scale
   * -------------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;                       /* Generous internal card padding: 24px */
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Button Padding Scale */
  --btn-padding-y: 14px;
  --btn-padding-x: 28px;                 /* Generous horizontal padding ~28px */

  /* --------------------------------------------------------------------------
   * 4. Radius & Elevation Tokens
   * -------------------------------------------------------------------------- */
  --radius-sm: 6px;                      /* Input fields */
  --radius-md: 12px;                     /* Small badges, sub-elements */
  --radius-lg: 20px;                     /* Cards (Figma: 20px corner radius) */
  --radius-pill: 999px;                  /* Buttons: fully rounded pill (Figma: 999px) */
  --radius-full: 999px;

  /* Soft Drop Shadows */
  --shadow-card: 0px 8px 24px rgba(15, 76, 74, 0.12);
  --shadow-card-hover: 0px 14px 32px rgba(15, 76, 74, 0.18);
  --shadow-soft: 0px 4px 16px rgba(15, 76, 74, 0.08);
  --shadow-dropdown: 0px 12px 28px rgba(15, 76, 74, 0.15);

  /* --------------------------------------------------------------------------
   * 5. Layout & Breakpoints
   * -------------------------------------------------------------------------- */
  --content-max-width: 1280px;
  --gutter-desktop: 24px;
  --gutter-mobile: 16px;
  --header-height-desktop: 96px;
  --header-height-mobile: 64px;
  --mobile-bar-height: 68px;

  /* --------------------------------------------------------------------------
   * 6. Smooth Transitions
   * -------------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-normal: 220ms ease;       /* Smooth transitions (200-250ms ease) */
  --transition-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}