/* =============================================================
   Bonjour! Design System — Tokens
   Extracted from the Figma file "👋 Bonjour Design System.fig"
   ============================================================= */

/* --- Fonts -------------------------------------------------- */
/* The Figma file uses SF Pro / SF Pro Display / SF Pro Text (Apple system
   typefaces — not redistributable) and PingFang SC (Apple zh-Hans system).
   We use Apple's system font stack on macOS/iOS where available, and
   Inter as a fallback elsewhere. No webfonts are shipped for SF/PingFang. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ---- System font stacks (honors native Apple fonts first) -- */
  --font-sans:
    -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "SF Pro Display", "SF Pro",
    "PingFang SC", "PingFang HK", "Hiragino Sans GB",
    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display:
    -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "SF Pro",
    "PingFang SC", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Roboto Mono", Consolas, monospace;

  /* ---- Brand ------------------------------------------------ */
  --brand-blue: #007CFF;          /* 0,124,255  — Bonjour Blue primary */
  --brand-blue-alt: #0088FF;      /* 0,136,255  — alt marketing blue */
  --brand-blue-ios: #007AFF;      /* iOS system blue, used in controls */

  --brand-black: #000000;
  --brand-white: #FFFFFF;
  --brand-beige: #DBC8AB;         /* card-foil copper/beige */
  --brand-indigo: #1C277B;        /* deep paper ink */

  /* ---- Grey scale (Apple label/system greys) --------------- */
  --grey-25:  #FCFCFD;
  --grey-50:  #F5F5F7;   /* page off-white */
  --grey-100: #E5E5EA;
  --grey-200: #D1D1D6;
  --grey-300: #C7C7CC;
  --grey-400: #AEAEB2;
  --grey-500: #8E8E93;
  --grey-600: #636366;
  --grey-700: #48484A;
  --grey-800: #3A3A3C;
  --grey-900: #1C1C1E;
  --grey-950: #0C0C0D;

  /* UI neutrals used in Figma frames */
  --line:    #E7E7E7;   /* 231,231,231 — card/divider hairline */
  --line-2:  #EFEFEF;   /* 239,239,239 — subtle divider */
  --line-3:  #ECECEC;   /* 236,236,236 — status/divider */
  --surface-soft: #F7F8FE;  /* 247,248,254 — input fill */
  --surface-muted: #F9F9F9;
  --surface-page:  #F5F5F7;
  --ink:           #111827;  /* primary text */
  --ink-muted:     #6D7280;  /* 109,114,128 — muted */
  --ink-soft:      #202020;  /* 32,32,32 — body-strong */
  --ink-subtle:    #646464;  /* 100,100,100 */
  --ink-faint:     #AAAAAA;  /* 170,170,170 — placeholder */
  --ink-fainter:   #8E8E8E;  /* 142,142,142 */

  /* ---- Red --------------------------------------------------- */
  --red-25: #FFF4F5;  --red-50:#FFECED;  --red-100:#FFD1D2; --red-200:#FFB9B9;
  --red-300:#FF9292;  --red-400:#FF7777; --red-500:#FF6165; --red-600:#FF383C;
  --red-700:#E9152D;  --red-800:#C31327; --red-900:#9A0D1D; --red-950:#6E0B16;

  /* ---- Orange ----------------------------------------------- */
  --orange-25:#FFF7F1;  --orange-50:#FFEBDB; --orange-100:#FFDABE; --orange-200:#FFC79B;
  --orange-300:#FFB072; --orange-400:#FFA259; --orange-500:#FF9441; --orange-600:#FF8D28;
  --orange-700:#C55301; --orange-800:#AC4901; --orange-900:#853700; --orange-950:#733000;

  /* ---- Semantic accents (iOS system) ----------------------- */
  --system-blue:   #007AFF;
  --system-green:  #34C759;
  --system-indigo: #5856D6;
  --system-orange: #FF9500;
  --system-pink:   #FF2D55;
  --system-purple: #AF52DE;
  --system-red:    #FF3B30;
  --system-teal:   #5AC8FA;
  --system-yellow: #FFCC00;
  --system-mint:   #00C7BE;
  --system-cyan:   #32ADE6;
  --system-brown:  #A2845E;

  /* ---- Radius (iOS rounded-rect system) ---------------------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-2xl: 28px;       /* capsule buttons, bars */
  --r-3xl: 40px;       /* hero cards / sheets */
  --r-pill: 9999px;

  /* ---- Spacing ---------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10:64px; --s-11:80px;

  /* ---- Shadows (from Figma: very subtle, layered drops) ----- */
  --shadow-xs:  2px 2px 4px 0 rgba(0,0,0,0.02);
  --shadow-sm:  4px 4px 4px 0 rgba(0,0,0,0.02);
  --shadow-md:  0 4px 14px 0 rgba(0,0,0,0.06);
  --shadow-lg:  0 12px 32px -6px rgba(0,0,0,0.12);
  --shadow-xl:  0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-focus: 0 0 0 .7px rgba(34,44,91,0.4);     /* button hairline */
  --shadow-inset-foil:
    inset 0 1px 0.5px 0 rgba(0,0,0,0.25),
    -1px 0.5px 1px 0 rgba(255,255,255,1);            /* bronze ticket foil */

  /* ---- Type scale (iOS HIG-aligned) -------------------------- */
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-body-s: 13px;
  --fs-body: 14px;             /* dominant body size in the file */
  --fs-body-l: 15px;           /* button labels */
  --fs-lg: 16px;
  --fs-xl: 17px;               /* nav bar title */
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-4xl: 32px;
  --fs-5xl: 48px;
  --fs-6xl: 60px;
  --fs-7xl: 72px;
  --fs-8xl: 96px;
  --fs-9xl: 128px;

  --lh-tight: 1.1;
  --lh-snug:  1.2;
  --lh-normal:1.3;
  --lh-relaxed:1.4;
  --lh-loose: 1.6;
}

/* ===========================================================
   Semantic utilities
   =========================================================== */

html, body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--brand-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display (hero, section titles) */
.t-display-xl { font-family: var(--font-display); font-weight: 700; font-size: 128px; line-height: 1.0;  letter-spacing: -0.03em; color: var(--brand-black); }
.t-display-l  { font-family: var(--font-display); font-weight: 700; font-size: 96px;  line-height: 1.0;  letter-spacing: -0.03em; }
.t-display-m  { font-family: var(--font-display); font-weight: 700; font-size: 60px;  line-height: 1.0;  letter-spacing: -0.02em; }
.t-h1         { font-family: var(--font-display); font-weight: 700; font-size: 48px;  line-height: 1.1;  letter-spacing: -0.02em; }
.t-h2         { font-family: var(--font-display); font-weight: 700; font-size: 32px;  line-height: 1.2;  letter-spacing: -0.01em; }
.t-h3         { font-family: var(--font-display); font-weight: 700; font-size: 24px;  line-height: 1.25; color: var(--ink); }
.t-h4         { font-family: var(--font-sans);    font-weight: 700; font-size: 20px;  line-height: 1.3;  }
.t-h5         { font-family: var(--font-sans);    font-weight: 700; font-size: 17px;  line-height: 22px; } /* nav title */
.t-body       { font-family: var(--font-sans);    font-weight: 400; font-size: 14px;  line-height: 1.5;  color: var(--ink-soft); }
.t-body-strong{ font-family: var(--font-sans);    font-weight: 500; font-size: 14px;  line-height: 1.5;  }
.t-label      { font-family: var(--font-sans);    font-weight: 500; font-size: 13px;  line-height: 1.3;  color: var(--ink-subtle); }
.t-caption    { font-family: var(--font-sans);    font-weight: 400; font-size: 12px;  line-height: 1.3;  color: var(--ink-muted); }
.t-overline   { font-family: var(--font-sans);    font-weight: 600; font-size: 11px;  line-height: 1.2;  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.t-mono       { font-family: var(--font-mono); font-size: 13px; }

/* Common element defaults */
h1 { font: 700 48px/1.1 var(--font-display); letter-spacing: -0.02em; }
h2 { font: 700 32px/1.2 var(--font-display); letter-spacing: -0.01em; }
h3 { font: 700 24px/1.25 var(--font-display); }
h4 { font: 700 20px/1.3 var(--font-sans); }
p  { font: 400 14px/1.5 var(--font-sans); color: var(--ink-soft); }
code, pre { font-family: var(--font-mono); }