/* ===========================================================================
   Ratnarenu Medical Store & Clinic — Design System v1.0
   Single source of truth for every design token. Do not hardcode values
   elsewhere; add a token here and reference it.
   Derived from the approved Claude Design canvas (artboard 2a).
   ========================================================================= */

:root {
  /* --- Brand green ------------------------------------------------------ */
  --brand-50:  #EAF6EF;   /* tint background            */
  --brand-100: #C9E7D6;   /* dividers, hover borders    */
  --brand-400: #34A96C;   /* loading state              */
  --brand-500: #009050;   /* logo green                 */
  --brand-600: #007A42;   /* primary CTA                */
  --brand-700: #04643A;   /* text on light, hover fill  */
  --brand-900: #043A22;   /* dark surface               */

  /* --- Lime accent (logo highlight; one per screen) --------------------- */
  --lime-50:  #F4F9DC;
  --lime-400: #B8D63C;    /* on dark only — never text on white */
  --lime-700: #7E9A16;    /* lime as text               */

  /* --- Status ----------------------------------------------------------- */
  --success: #0B7A45;
  --warning: #B26A05;
  --danger:  #B4302A;
  --danger-ring: #F0B4B0;

  /* --- Neutrals (green-warm) ------------------------------------------- */
  --surface:      #FFFFFF;
  --canvas:       #F6F8F5;
  --disabled-fill:#E9EEE9;
  --border:       #E2E9E2;
  --placeholder:  #8A9490;  /* 3.1:1 — placeholder text only */
  --muted:        #5F6B62;  /* 5.4:1  */
  --body:         #2E3A32;  /* 11.4:1 */
  --heading:      #12211A;  /* 15.8:1 */

  /* --- Type ------------------------------------------------------------- */
  --font-heading: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;

  /* Fluid type: interpolates 390px → 1440px, then holds.
     Mobile rungs come straight from the design system artboard. */
  /* Each curve reaches its approved desktop size at exactly 1440px:
     slope = (max-min)/(1440-390), intercept = min - slope*390. */
  --fs-display: clamp(2.125rem, 1.4286rem + 2.8571vw, 4rem);   /* 34 @390 → 64 @1440 */
  --fs-h1:      clamp(1.875rem, 1.3643rem + 2.0952vw, 3.25rem);/* 30 → 52 */
  --fs-h2:      clamp(1.75rem,  1.3786rem + 1.5238vw, 2.75rem);/* 28 → 44 */
  --fs-h3:      clamp(1.1875rem,0.9786rem + 0.8571vw, 1.75rem);/* 19 → 28 */
  --fs-h4:      clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem);/* 18 → 20 */
  --fs-lead:    clamp(1.0625rem,1.0161rem + 0.1905vw, 1.1875rem);/* 17 → 19 */
  --fs-body:    1rem;        /* 16 — accessibility floor, never smaller */
  --fs-body-lg: 1.0625rem;   /* 17 — long-form sections */
  --fs-small:   0.875rem;    /* 14 */
  --fs-eyebrow: 0.8125rem;   /* 13 */
  --fs-caption: 0.75rem;     /* 12 */

  --lh-display: 1.04;
  --lh-h1: 1.1;   --lh-h2: 1.12;  --lh-h3: 1.2;  --lh-h4: 1.3;
  --lh-lead: 1.6; --lh-body: 1.7; --lh-small: 1.6;

  --ls-tight: -0.02em;
  --ls-eyebrow: 0.14em;

  /* --- Spacing (4/8 rhythm) -------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 56px;
  --s-9: 64px;  --s-10: 80px; --s-11: 96px; --s-12: 128px;

  --card-pad: var(--s-6);      /* 32 */
  --card-gap: var(--s-5);      /* 24 */
  --stack:    var(--s-4);      /* 16 */

  /* Section padding: mobile 56/20 → desktop 128/80 */
  --section-y: clamp(3.5rem, 1.8286rem + 6.8571vw, 8rem);   /* 56 → 128 */
  --gutter:    clamp(1.25rem, -0.1429rem + 5.7143vw, 5rem);  /* 20 → 80  */
  --maxw:      1280px;

  /* --- Radius ----------------------------------------------------------- */
  --r-sm: 8px;    /* small buttons, chips   */
  --r-md: 10px;   /* buttons, inputs        */
  --r-lg: 16px;   /* tiles, notes           */
  --r-xl: 20px;   /* cards                  */
  --r-2xl: 28px;  /* hero panels            */
  --r-full: 999px;

  /* --- Elevation (3 levels only) --------------------------------------- */
  --e1: 0 1px 2px rgba(6,40,24,.08);
  --e2: 0 8px 24px -6px rgba(6,40,24,.16);
  --e3: 0 32px 72px -24px rgba(6,40,24,.32);

  /* --- Controls --------------------------------------------------------- */
  --btn-h: 48px;          /* minimum tap target */
  --field-h: 52px;
  /* The design mandates a 3px lime ring. Lime on white is only 1.6:1, which
     fails WCAG 2.4.11 (3:1 for focus indicators), so a dark inner ring carries
     the contrast (12.6:1 on white) while lime stays the visible signature.
     The dark ring also doubles as the 2px offset the spec asks for. */
  --focus-ring: 0 0 0 2px var(--brand-900), 0 0 0 5px var(--lime-400);
  --focus-ring-on-dark: 0 0 0 2px var(--surface), 0 0 0 5px var(--lime-400);
  --focus-offset: 2px;
  --icon-tile: 52px;

  --transition: 160ms cubic-bezier(.4,0,.2,1);
}

/* The design commits to one light palette. Dark-mode viewers get the same
   intended appearance rather than an unreviewed inversion. */
@media (prefers-color-scheme: dark) { :root { color-scheme: light; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}