/* ============================================================
   PawSeva Design System — Colors & Typography Tokens
   Source: PawSeva.fig (Figma), Foundation frames
   ============================================================ */

/* ─── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=Inter:wght@400;500;600&family=DM+Sans:wght@400;500;600;700&display=swap');

/* Note: Lora substitutes for Georgia/editorial use
         Plus Jakarta Sans is exact (used in Figma)
         IBM Plex Sans is exact
         Inter is exact
         DM Sans is exact
         Albert Sans used in logo brand copy (loaded separately if needed) */

/* ─── Color Palette — Green ─────────────────────────────────── */
:root {
  --green-50:  #E8F5F1;
  --green-100: #C8E8DF;
  --green-200: #A0D4C4;
  --green-300: #6CB8A4;
  --green-400: #3D9B82;
  --green-500: #0F6E52;   /* PRIMARY BRAND */
  --green-600: #0C5A43;
  --green-700: #094533;
  --green-800: #063324;
  --green-900: #031A12;

  /* ─── Color Palette — Saffron ──────────────────────────────── */
  --saffron-50:  #FDF3E8;
  --saffron-100: #FAE0C2;
  --saffron-200: #F6C896;
  --saffron-300: #F1AE6A;
  --saffron-400: #EC983A;
  --saffron-500: #E8873A;  /* SECONDARY BRAND */
  --saffron-600: #C96E28;
  --saffron-700: #A8571A;
  --saffron-800: #7A3D10;
  --saffron-900: #4A2408;

  /* ─── Color Palette — Red (semantic/error) ─────────────────── */
  --red-100: #F8C8C4;
  --red-500: #D64335;
  --red-700: #A82B20;
  --red-900: #6B1A14;

  /* ─── Color Palette — Neutral (warm-toned) ─────────────────── */
  --neutral-50:  #F7F4EF;
  --neutral-100: #EDE8E0;
  --neutral-200: #D8D1C5;
  --neutral-300: #B8AFA0;
  --neutral-400: #8C8278;
  --neutral-500: #5C5550;
  --neutral-600: #3E3830;
  --neutral-700: #2E2A24;
  --neutral-800: #201C18;
  --neutral-900: #1C1814;

  /* ─── Semantic Colors ───────────────────────────────────────── */
  --color-brand:           var(--green-500);
  --color-brand-hover:     var(--green-600);
  --color-brand-active:    var(--green-700);
  --color-accent:          var(--saffron-500);
  --color-accent-hover:    var(--saffron-600);

  --color-bg:              #FFFFFF;
  --color-surface:         var(--neutral-50);    /* #F7F4EF — warm off-white */
  --color-surface-alt:     var(--neutral-100);   /* #EDE8E0 */
  --color-border:          var(--neutral-200);   /* #D8D1C5 */
  --color-border-strong:   var(--neutral-300);   /* #B8AFA0 */

  --color-fg:              var(--neutral-900);   /* #1C1814 — body text */
  --color-fg-1:            #192839;              /* headings (from Figma: rgb(25,40,57)) */
  --color-fg-2:            var(--neutral-600);   /* #3E3830 — secondary text */
  --color-fg-3:            var(--neutral-400);   /* #8C8278 — muted text */
  --color-fg-placeholder:  var(--neutral-300);   /* #B8AFA0 — input placeholder */

  --color-error:           var(--red-500);
  --color-error-bg:        var(--red-100);
  --color-success:         var(--green-500);

  /* Input border default */
  --color-input-border:    var(--neutral-200);   /* #D8D1C5 */

  /* ─── Spacing Scale ─────────────────────────────────────────── */
  --space-0:   0px;
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   8px;
  --space-4:   12px;
  --space-5:   16px;
  --space-6:   20px;
  --space-7:   24px;
  --space-8:   32px;
  --space-9:   40px;
  --space-10:  48px;
  --space-11:  56px;
  --space-12:  64px;
  --space-16:  80px;
  --space-20: 120px;

  /* ─── Border Radius ─────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-3xl:  56px;
  --radius-full: 999px;   /* pills — buttons, inputs */

  /* ─── Stroke / Border Widths ────────────────────────────────── */
  --stroke-1: 1px;
  --stroke-2: 2px;
  --stroke-3: 3px;
  --stroke-4: 4px;
  --stroke-8: 8px;

  /* ─── Elevation / Shadows ───────────────────────────────────── */
  --shadow-sm:   0px 2px 6px 0px rgba(0,0,0,0.10);    /* small elements */
  --shadow-md:   0px 4px 10px 0px rgba(0,0,0,0.10);   /* medium elements */
  --shadow-lg:   0px 8px 16px 0px rgba(0,0,0,0.10);   /* large elements */
  --shadow-xl:   0px 12px 24px 0px rgba(0,0,0,0.10);  /* extra large */

  /* Top-cast variants */
  --shadow-top-sm:   0px -4px 6px 0px rgba(0,0,0,0.10);
  --shadow-top-md:   0px -6px 12px 0px rgba(0,0,0,0.10);
  --shadow-top-lg:   0px -10px 20px 0px rgba(0,0,0,0.10);
  --shadow-top-xl:   0px -14px 28px 0px rgba(0,0,0,0.10);

  /* ─── Typography — Font Families ───────────────────────────── */
  --font-display:   'Lora', Georgia, serif;
  --font-heading:   'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:      'IBM Plex Sans', system-ui, sans-serif;
  --font-ui:        'Inter', system-ui, sans-serif;
  --font-label:     'DM Sans', system-ui, sans-serif;
  --font-logo:      'Plus Jakarta Sans', system-ui, sans-serif;

  /* ─── Typography — Website Scale ───────────────────────────── */

  /* Display — Lora 72px, bold, -2px tracking */
  --text-display-size:     72px;
  --text-display-mobile:   40px;
  --text-display-weight:   700;
  --text-display-lh:       76px;
  --text-display-ls:       -2px;

  /* Heading H1 — Plus Jakarta Sans 48px bold */
  --text-h1-size:   48px;
  --text-h1-weight: 700;
  --text-h1-lh:     1.2;
  --text-h1-ls:     -0.5px;

  /* Heading H2 — Plus Jakarta Sans 36px bold */
  --text-h2-size:   36px;
  --text-h2-weight: 700;
  --text-h2-lh:     1.2;
  --text-h2-ls:     -0.5px;

  /* Heading H3 — Plus Jakarta Sans 28px bold */
  --text-h3-size:   28px;
  --text-h3-weight: 700;
  --text-h3-lh:     1.2;
  --text-h3-ls:     -0.5px;

  /* Heading H4 — Plus Jakarta Sans 24px semibold */
  --text-h4-size:   24px;
  --text-h4-weight: 600;
  --text-h4-lh:     1.3;
  --text-h4-ls:     0px;

  /* Body XL — IBM Plex Sans 20px regular */
  --text-body-xl-size:   20px;
  --text-body-xl-weight: 400;
  --text-body-xl-lh:     1.4;
  --text-body-xl-ls:     0px;

  /* Body L — IBM Plex Sans 16px regular */
  --text-body-l-size:   16px;
  --text-body-l-weight: 400;
  --text-body-l-lh:     1.4;
  --text-body-l-ls:     0px;

  /* Body M — Inter 14px regular */
  --text-body-m-size:   14px;
  --text-body-m-weight: 400;
  --text-body-m-lh:     1.7;
  --text-body-m-ls:     0.2px;

  /* Body S — Inter 12px regular */
  --text-body-s-size:   12px;
  --text-body-s-weight: 400;
  --text-body-s-lh:     1.7;
  --text-body-s-ls:     0.2px;

  /* Label / Nav — DM Sans 14px semibold */
  --text-label-size:   14px;
  --text-label-weight: 600;
  --text-label-lh:     22px;
  --text-label-ls:     0px;

  /* Nav link — DM Sans 14px bold */
  --text-nav-size:   14px;
  --text-nav-weight: 700;
  --text-nav-lh:     22px;
  --text-nav-ls:     0px;
}

/* ─── Semantic Typography Classes ──────────────────────────── */

.text-display {
  font-family: var(--font-display);
  font-size: var(--text-display-size);
  font-weight: var(--text-display-weight);
  line-height: var(--text-display-lh);
  letter-spacing: var(--text-display-ls);
  color: var(--color-fg-1);
}

h1, .text-h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
  color: var(--color-fg-1);
}

h2, .text-h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
  color: var(--color-fg-1);
}

h3, .text-h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
  color: var(--color-fg-1);
}

h4, .text-h4 {
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
  color: var(--color-fg-1);
}

p, .text-body {
  font-family: var(--font-body);
  font-size: var(--text-body-l-size);
  font-weight: var(--text-body-l-weight);
  line-height: var(--text-body-l-lh);
  color: var(--color-fg-2);
}

.text-body-xl {
  font-family: var(--font-body);
  font-size: var(--text-body-xl-size);
  font-weight: var(--text-body-xl-weight);
  line-height: var(--text-body-xl-lh);
  color: var(--color-fg-2);
}

.text-body-m {
  font-family: var(--font-ui);
  font-size: var(--text-body-m-size);
  font-weight: var(--text-body-m-weight);
  line-height: var(--text-body-m-lh);
  letter-spacing: var(--text-body-m-ls);
  color: var(--color-fg-2);
}

.text-body-s {
  font-family: var(--font-ui);
  font-size: var(--text-body-s-size);
  font-weight: var(--text-body-s-weight);
  line-height: var(--text-body-s-lh);
  letter-spacing: var(--text-body-s-ls);
  color: var(--color-fg-3);
}

.text-label {
  font-family: var(--font-label);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  line-height: var(--text-label-lh);
  color: var(--color-fg-2);
}

.text-nav {
  font-family: var(--font-label);
  font-size: var(--text-nav-size);
  font-weight: var(--text-nav-weight);
  line-height: var(--text-nav-lh);
  color: var(--neutral-500);
}