/* =========================================================
   ZIPPER DESIGN SYSTEM — Colors & Typography
   Sources: Brand Board, marketing assets, app screenshots
   ========================================================= */

/* ── Brand Fonts ── */
@font-face {
  font-family: 'Sora';
  src: url('fonts/Sora-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
/* Open Sans — no brand file provided; loaded from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* =========================================================
   COLOR TOKENS — Base Palette
   ========================================================= */
:root {
  /* Brand Primaries */
  --color-rust:          #D25F34;   /* primary CTA, brand accent */
  --color-rust-light:    #FA7540;   /* gradient start / hover */
  --color-rust-dark:     #A63C02;   /* gradient end / pressed */

  /* Neutrals */
  --color-charcoal:      #424240;   /* primary text, dark bg */
  --color-charcoal-mid:  #5A5A58;   /* secondary text on light */
  --color-gray:          #C8C9C5;   /* borders, dividers */
  --color-gray-light:    #E8E8E4;   /* subtle divider */

  /* Backgrounds */
  --color-cream:         #F2F0E6;   /* warm page bg */
  --color-peach:         #FFF2E7;   /* light warm tint */
  --color-white:         #FFFFFF;

  /* App-specific (member mobile app) */
  --color-teal-dark:     #1C3B38;   /* app header bg */
  --color-teal-mid:      #2D5550;   /* app card secondary */
  --color-teal-accent:   #3CBFB4;   /* highlights, nav active, time labels */
  --color-teal-light:    #E6F5F3;   /* light teal bg tint for cards */

  /* Semantic status palette (booking/class states) */
  --color-ember-bg:      #F5E8E0;  /* Active */
  --color-ember-text:    #A03D1A;
  --color-ember-dot:     #D25F34;

  --color-clay-bg:       #F4EAE4;  /* VIP */
  --color-clay-text:     #7A3D27;
  --color-clay-dot:      #B96B4E;

  --color-sand-bg:       #F5EFE0;  /* Trial */
  --color-sand-text:     #8A6620;
  --color-sand-dot:      #C4993A;

  --color-moss-bg:       #E8EDE4;  /* Confirmed */
  --color-moss-text:     #3D5C2E;
  --color-moss-dot:      #6ABC5A;

  --color-sage-bg:       #E6EDE8;  /* Paid */
  --color-sage-text:     #2E5C42;
  --color-sage-dot:      #5A8C70;

  --color-teal-bg:       #E2EEEC;  /* Appointment */
  --color-teal-text:     #1C5C58;
  --color-teal-dot:      #3D8C86;

  --color-slate-bg:      #E4E8EC;  /* Workshop */
  --color-slate-text:    #243D5C;
  --color-slate-dot:     #4A6C8C;

  --color-lavender-bg:   #EAE6EE;  /* Series */
  --color-lavender-text: #4A2E6C;
  --color-lavender-dot:  #7A5C9C;

  --color-ash-bg:        #EAEAE6;  /* Pending */
  --color-ash-text:      #3E3E3C;
  --color-ash-dot:       #6E6E6A;

  --color-rose-bg:       #F2E6E8;  /* At Risk */
  --color-rose-text:     #6C2030;
  --color-rose-dot:      #A04A5A;

  /* ── Semantic Surface Tokens ── */
  --bg-page:             var(--color-cream);
  --bg-card:             var(--color-white);
  --bg-overlay:          var(--color-charcoal);
  --bg-app-header:       var(--color-teal-dark);
  --bg-cta:              var(--color-rust);

  --fg-primary:          var(--color-charcoal);
  --fg-secondary:        var(--color-charcoal-mid);
  --fg-muted:            var(--color-gray);
  --fg-on-dark:          var(--color-white);
  --fg-accent:           var(--color-rust);
  --fg-app-accent:       var(--color-teal-accent);

  --border-default:      var(--color-gray-light);
  --border-strong:       var(--color-gray);
}

/* =========================================================
   GRADIENT TOKENS
   ========================================================= */
:root {
  --gradient-cta:        linear-gradient(135deg, var(--color-rust-light), var(--color-rust-dark));
  --gradient-warm:       linear-gradient(160deg, #FFF2E7 0%, #F2F0E6 100%);
  --gradient-overlay:    linear-gradient(to bottom, rgba(66,66,64,0) 0%, rgba(66,66,64,0.72) 100%);
}

/* =========================================================
   TYPOGRAPHY TOKENS
   ========================================================= */
:root {
  --font-display:        'Sora', sans-serif;   /* headlines, brand statements */
  --font-body:           'Open Sans', sans-serif; /* body copy, UI labels */

  /* Scale */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */
  --text-5xl:   3rem;      /* 48px */
  --text-6xl:   3.75rem;   /* 60px */

  /* Weight */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;
}

/* =========================================================
   SPACING & RADII
   ========================================================= */
:root {
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* Radii — warm, friendly rounding */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-card:   0 2px 12px rgba(66,66,64,0.08);
  --shadow-modal:  0 8px 40px rgba(66,66,64,0.18);
  --shadow-button: 0 2px 8px rgba(210,95,52,0.28);
}

/* =========================================================
   SEMANTIC TYPE STYLES — apply to elements
   ========================================================= */

/* Display / Hero */
.h-hero {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
  text-wrap: balance;
}

.h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

.h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--fg-primary);
}

.overline {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.accent-text {
  color: var(--fg-accent);
}