/* ============================================================
   MEET-BG DESIGN SYSTEM — colors_and_type.css
   Central token file. Import this in all UI kits and previews.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

/* Windows Defender MDL2 Assets — icon/symbol font (Microsoft) */
@font-face {
  font-family: 'MDL2Assets';
  src: url('fonts/WDefMDL2.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* Usage: <span style="font-family:'MDL2Assets'">&#xE700;</span> */

/* ─── RAW COLOR PALETTE ─────────────────────────────────── */
:root {
  /* Brand */
  --color-graphite:       #1E1E1E;
  --color-gold:           #C9A24D;
  --color-gold-light:     #DDB96A;
  --color-gold-dark:      #A8833A;
  --color-cream:          #F7F4EF;
  --color-cream-dark:     #EDE8E0;

  /* App accents */
  --color-orange:         #F47A20;
  --color-orange-light:   #F99150;
  --color-orange-dark:    #D4631A;
  --color-navy:           #0D1B2A;

  /* App surfaces */
  --color-app-bg:         #0D0D0D;
  --color-app-surface:    #1F1F1F;
  --color-app-surface-2:  #2A2A2A;
  --color-app-border:     #333333;

  /* Neutrals */
  --color-neutral-900:    #111111;
  --color-neutral-800:    #1E1E1E;
  --color-neutral-700:    #2B2B2B;
  --color-neutral-600:    #4B4B4B;
  --color-neutral-500:    #6B7280;
  --color-neutral-400:    #9CA3AF;
  --color-neutral-300:    #D1D5DB;
  --color-neutral-200:    #E5E7EB;
  --color-neutral-100:    #F3F4F6;
  --color-neutral-50:     #F9FAFB;
  --color-white:          #FFFFFF;

  /* Semantic — Marketing (light) */
  --fg-primary:           var(--color-graphite);
  --fg-secondary:         var(--color-neutral-500);
  --fg-muted:             var(--color-neutral-400);
  --fg-inverse:           var(--color-white);
  --bg-page:              var(--color-cream);
  --bg-surface:           var(--color-white);
  --bg-surface-alt:       var(--color-cream-dark);
  --bg-dark:              var(--color-graphite);
  --accent:               var(--color-gold);
  --accent-hover:         var(--color-gold-dark);
  --border:               var(--color-neutral-200);
  --border-strong:        var(--color-neutral-300);

  /* Semantic — App (dark) */
  --app-fg:               var(--color-white);
  --app-fg-2:             var(--color-neutral-400);
  --app-fg-3:             var(--color-neutral-500);
  --app-bg:               var(--color-app-bg);
  --app-surface:          var(--color-app-surface);
  --app-surface-2:        var(--color-app-surface-2);
  --app-border:           var(--color-app-border);
  --app-accent:           var(--color-orange);
  --app-accent-hover:     var(--color-orange-dark);
  --app-verified:         #4A9EFF;

  /* Status */
  --color-success:        #22C55E;
  --color-warning:        #F59E0B;
  --color-error:          #EF4444;
  --color-info:           #3B82F6;
}

/* ─── TYPOGRAPHY SCALE ──────────────────────────────────── */
:root {
  /* Font families */
  --font-display:   'Cormorant Garamond', Georgia, serif;
  --font-ui:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font sizes */
  --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 */
  --text-7xl:       4.5rem;     /* 72px */

  /* Font weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.15em;
}

/* ─── SEMANTIC TYPE ROLES ───────────────────────────────── */
:root {
  /* Display — marketing hero, event names */
  --type-hero-size:       var(--text-7xl);
  --type-hero-family:     var(--font-display);
  --type-hero-weight:     var(--weight-light);
  --type-hero-leading:    var(--leading-tight);
  --type-hero-tracking:   var(--tracking-tight);

  /* H1 */
  --type-h1-size:         var(--text-5xl);
  --type-h1-family:       var(--font-display);
  --type-h1-weight:       var(--weight-medium);
  --type-h1-leading:      var(--leading-snug);

  /* H2 */
  --type-h2-size:         var(--text-3xl);
  --type-h2-family:       var(--font-display);
  --type-h2-weight:       var(--weight-medium);
  --type-h2-leading:      var(--leading-snug);

  /* H3 */
  --type-h3-size:         var(--text-2xl);
  --type-h3-family:       var(--font-display);
  --type-h3-weight:       var(--weight-regular);
  --type-h3-leading:      var(--leading-normal);

  /* Body */
  --type-body-size:       var(--text-base);
  --type-body-family:     var(--font-ui);
  --type-body-weight:     var(--weight-regular);
  --type-body-leading:    var(--leading-relaxed);

  /* UI labels */
  --type-label-size:      var(--text-sm);
  --type-label-family:    var(--font-ui);
  --type-label-weight:    var(--weight-medium);
  --type-label-tracking:  var(--tracking-wide);

  /* Caption */
  --type-caption-size:    var(--text-xs);
  --type-caption-family:  var(--font-ui);
  --type-caption-weight:  var(--weight-regular);
  --type-caption-tracking:var(--tracking-wide);
}

/* ─── SPACING SCALE ─────────────────────────────────────── */
: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 */
  --space-32:  8rem;      /* 128px */
}

/* ─── BORDER RADIUS ─────────────────────────────────────── */
:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;
}

/* ─── SHADOWS ────────────────────────────────────────────── */
:root {
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:   0 2px 16px rgba(0,0,0,0.08);
  --shadow-lg:   0 4px 32px rgba(0,0,0,0.12);
  --shadow-xl:   0 8px 48px rgba(0,0,0,0.18);
  --shadow-app:  0 2px 12px rgba(0,0,0,0.4);
  --shadow-gold: 0 0 0 2px var(--color-gold);
}

/* ─── Z-INDEX ────────────────────────────────────────────── */
:root {
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

/* ─── TRANSITIONS ────────────────────────────────────────── */
:root {
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
}

/* ─── BASE RESET + DEFAULTS ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font-family: var(--type-h1-family); font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); line-height: var(--type-h1-leading); }
h2 { font-family: var(--type-h2-family); font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-leading); }
h3 { font-family: var(--type-h3-family); font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-leading); }
p  { font-family: var(--type-body-family); font-size: var(--type-body-size); line-height: var(--type-body-leading); }