/* ─────────────────────────────────────────────────────────────
   HUMBRELA — Color & Type foundation
   Sourced from the Mobile-app.fig file (top-use colors + fonts).
   ─────────────────────────────────────────────────────────────*/

/* ── Web fonts
   Outfit: local variable font (brand-provided, fonts/Outfit-VariableFont_wght.ttf)
   Inter:  Google Fonts substitute — user has not provided TTF yet. */
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ── CORE BRAND */
  --humbrela-pink:       #FF1675;  /* Hot pink — primary send/CTA/chat bubble */
  --humbrela-pink-alt:   #FF3285;  /* Button pink (slightly lighter) */
  --humbrela-pink-deep:  #B5117D;  /* Deep magenta (gradient toe) */
  --humbrela-yellow:     #F8CE05;  /* Ela / AI prompt card */
  --humbrela-yellow-ink: #E9C100;  /* Yellow border */
  --humbrela-ink:        #0F1729;  /* Deep navy-ink (headings) */
  --humbrela-black:      #000000;
  --humbrela-white:      #FFFFFF;

  /* ── SURFACES */
  --bg-app:              #F7F7F7;  /* App canvas */
  --bg-card:             #FFFFFF;  /* Card / sheet */
  --bg-dark:             #000000;  /* Onboarding dark */
  --bg-subtle:           #EEEEEE;  /* Hover / divider wash */
  --bg-input:            #FFFFFF;  /* Input background */
  --bg-chip-blue:        rgba(0,106,236,0.10);
  --bg-chip-green:       #DCFCE7;
  --bg-chip-orange:      #FFEBD1;
  --bg-chip-red:         #FFE2E8;
  --bg-icon-blue:        #E5F0FD;  /* Broker avatar bubble */

  /* ── TEXT */
  --fg1:                 #0F1729;  /* Primary text (ink) */
  --fg2:                 #65758B;  /* Secondary (labels, captions) */
  --fg3:                 #9A9A9A;  /* Tertiary (timestamps) */
  --fg-on-pink:          #FFFFFF;
  --fg-on-dark:          #FFFFFF;
  --fg-muted-inline:     #8B8B8B;  /* "Humbrelo" sub-label */
  --fg-dim-dark:         #ECECEC;  /* On-pink timestamps */

  /* ── BORDERS */
  --border-hairline:     #EAEAEA;
  --border-faint:        rgba(255,255,255,0.20);
  --border-ring-blue:    rgba(0,106,236,0.50);
  --border-yellow:       #E9C100;

  /* ── STATUS SEMANTICS */
  --status-active-bg:    #DCFCE7;
  --status-active-fg:    #166534;
  --status-expiring-bg:  #FFEBD1;
  --status-expiring-fg:  #4B1700;
  --status-expired-bg:   #FFE2E8;
  --status-expired-fg:   #B5117D;
  --status-info-bg:      rgba(0,106,236,0.10);
  --status-info-fg:      #006AEC;

  /* ── ACCENT (supporting) */
  --accent-blue:         #2568E5;
  --accent-blue-soft:    rgba(37,104,229,0.10);
  --accent-teal:         #2B778C;
  --accent-sky:          #1BB5FF;
  --accent-orange:       #FF8D28;
  --accent-indigo:       #2A2171;

  /* ── SHADOW / ELEVATION */
  --shadow-card:         0 10px 20px 0 rgba(0,0,0,0.10);
  --shadow-soft:         0 2px 6px 0 rgba(0,0,0,0.05);
  --shadow-lift:         0 16px 32px -8px rgba(0,0,0,0.14);
  --shadow-press:        inset 0 0 0 1px rgba(0,0,0,0.06);

  /* ── RADII */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    20px;   /* Canonical card radius */
  --radius-2xl:   28px;
  --radius-pill:  9999px;

  /* ── SPACING (4pt grid) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* Screen gutter */
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── TYPE STACKS */
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter',  system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── TYPE TOKENS (fluid mobile-first; ratios mirror the Figma) */
  --t-display-lg: 700 32px/1.0 var(--font-display);   /* Onboarding hero */
  --t-display-md: 700 24px/1.1 var(--font-display);   /* "Add my first policy" tier */
  --t-h1:         500 24px/24px var(--font-display);  /* "Hello Mathieu 👋" */
  --t-h2:         500 18px/24px var(--font-display);  /* Section head, nav title */
  --t-h3:         500 18px/20px var(--font-display);  /* Card heading (Stéphane) */
  --t-label-lg:   500 16px/20px var(--font-display);
  --t-body-md:    400 14px/20px var(--font-body);     /* General body */
  --t-body-em:    500 14px/20px var(--font-display);  /* Emphasised body */
  --t-cta:        700 14px/16px var(--font-display);  /* Button/chip label */
  --t-caption:    300 14px/20px var(--font-display);  /* Soft caption ("Your broker") */
  --t-micro:      500 12px/16px var(--font-display);  /* Tiny chip/badge */
  --t-timestamp:  400 12px/100% var(--font-body);
  --t-kbd:        400 14px/1.2 var(--font-body);
  --t-num-xl:     700 32px/1 var(--font-display);     /* "1567.78 €" */
}

/* ── SEMANTIC ELEMENTS (convenient defaults) */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font: var(--t-body-md); color: var(--fg1); background: var(--bg-app); }
h1 { font: var(--t-display-lg); color: var(--humbrela-black); letter-spacing: -0.01em; margin: 0; }
h2 { font: var(--t-h1); color: var(--humbrela-black); margin: 0; }
h3 { font: var(--t-h2); color: var(--humbrela-ink); margin: 0; }
h4 { font: var(--t-h3); color: var(--humbrela-ink); margin: 0; }
p  { font: var(--t-body-md); color: var(--fg1); margin: 0; }
small { font: var(--t-caption); color: var(--fg2); }
code, kbd { font: var(--t-kbd); font-family: var(--font-mono); }