/* D Lulu design tokens (light only).
 * Source: specs/design-system.md (from the Flutter app, lib/core/theme/app_theme.dart and friends).
 * Owner: core team. Feature teams read these; ask core to add a token rather than hard-coding a new one.
 */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/assets/fonts/dm-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/assets/fonts/dm-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/assets/fonts/dm-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/site/assets/fonts/dm-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url(/site/assets/fonts/dm-sans-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/assets/fonts/dm-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/site/assets/fonts/dm-sans-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/assets/fonts/dm-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/site/assets/fonts/dm-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url(/site/assets/fonts/dm-sans-latin-ext-800-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* The app maps any heavier request (w900 labels such as "HAPPENING NOW") onto the 800 file. */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 900; font-display: swap; src: url(/site/assets/fonts/dm-sans-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "FrauncesDate"; font-style: normal; font-weight: 600; font-display: swap; src: url(/site/assets/fonts/FrauncesDate-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "FrauncesDate"; font-style: italic; font-weight: 600; font-display: swap; src: url(/site/assets/fonts/FrauncesDate-SemiBoldItalic.woff2) format("woff2"); }

:root {
  /* ---------- Core colours (AppColorSet light, app_theme.dart:163-186) ---------- */
  --bg: #F8F5FC;
  --surface: #FFFFFF;
  --surface-variant: #F4F0FA;
  --surface-bright: #F0EDF5;
  --primary: #4ECDC4;
  --primary-light: #6FE0D8;
  --primary-dark: #3BAFA8;
  --secondary: #7B68C8;
  --secondary-light: #9B8FE4;
  --accent: #D46BA8;
  --accent-light: #E88FBB;
  --ink: #2A2540;            /* textPrimary, snackbar bg, titles */
  --text-2: #7A7590;         /* textSecondary, default body text */
  --text-muted: #9090A8;
  --on-primary: #FFFFFF;
  --error: #D44040;
  --error-dark: #B82828;
  --success: #48BB78;
  --success-dark: #38A169;
  --warning: #F5A623;
  --divider: #F5F3F8;
  --border: #E8E4F0;
  --border-focused: #4ECDC4;

  /* Frequent literals */
  --tab-inactive: #9CA3AF;
  --brand-ink: #6558B0;      /* purple text links on white */
  --city-ink: #2B7F7A;       /* city pill icon */
  --segment-inactive: #6A6A85;
  --switch-off: #E2DCEB;
  --live-green: #34C77B;
  --live-green-deep: #14A76B;
  --live-teal: #1F9D8A;
  --tick-green: #1F9D5C;
  --chats-blue: #5B8DEF;
  --happening-teal: #2FA8A0;
  --happening-rose: #E8637A;

  /* Happening-now token pastels (happening_now_strip.dart:1042-1049) */
  --pastel-cream: #FDF6EC;
  --pastel-sky: #EDF4FD;
  --pastel-blush: #FBEFF3;
  --pastel-mint: #EFF9F1;
  --pastel-lavender: #F1EDFB;
  --pastel-peach: #FDF3EA;

  /* ---------- Gradients (to bottom right unless noted) ---------- */
  --grad-brand: linear-gradient(to bottom right, #4ECDC4, #7B68C8, #D46BA8);
  --grad-teal-purple: linear-gradient(to bottom right, #4ECDC4, #7B68C8);
  --grad-purple-pink: linear-gradient(to bottom right, #7B68C8, #D46BA8);
  --grad-pink-teal: linear-gradient(to bottom right, #D46BA8, #4ECDC4);
  --grad-segment: linear-gradient(to bottom right, rgba(78,205,196,.8), rgba(123,104,200,.8));
  --grad-text: linear-gradient(to right, #4ECDC4, #7B68C8);
  --grad-create-fab: linear-gradient(to bottom right, #3BB5AD, #4ECDC4, #5BA8C8);
  --grad-map-fab: linear-gradient(to bottom right, #3BAFA8, #7C6BD6);
  --grad-happening: linear-gradient(to right, #2FA8A0, #E8637A);
  --grad-live: linear-gradient(to bottom right, #14A76B, #1F9D8A);
  --grad-avatar-ring: linear-gradient(to right, #7B68C8, #D46BA8);
  --grad-explore-trip: linear-gradient(to bottom right, #3FB8B0 0%, #5B8FD4 55%, #7B68C8 100%);

  /* Tab accents (home_shell.dart) */
  --tab-hangout-a: #4ECDC4; --tab-hangout-b: #45B7AA;
  --tab-activity-a: #4ECDC4; --tab-activity-b: #7B68C8;
  --tab-chats-a: #5B8DEF;   --tab-chats-b: #7B68C8;

  /* Mood families (card / bubble colour faces), first variant */
  --mood-coffee: linear-gradient(to bottom right, #D4A574, #E8956A);
  --mood-food: linear-gradient(to bottom right, #E8956A, #D4A574);
  --mood-gym: linear-gradient(to bottom right, #E06B6B, #D45B7A);
  --mood-movie: linear-gradient(to bottom right, #7B68C8, #B85BAD);
  --mood-travel: linear-gradient(to bottom right, #4ECDC4, #5BA8D4);
  --mood-outdoors: linear-gradient(to bottom right, #5BC87B, #4ECDC4);
  --mood-sport: linear-gradient(to bottom right, #E06B6B, #D4885B);
  --mood-gaming: linear-gradient(to bottom right, #7B68C8, #5B7BD4);
  --mood-nightlife: linear-gradient(to bottom right, #6B5BAD, #D46BA8);
  --mood-music: linear-gradient(to bottom right, #B85BAD, #7B68C8);
  --mood-study: linear-gradient(to bottom right, #5BA8D4, #7B68C8);
  --mood-shopping: linear-gradient(to bottom right, #D46BA8, #E8956A);
  --mood-social: linear-gradient(to bottom right, #4ECDC4, #7B68C8);
  --mood-wellness: linear-gradient(to bottom right, #68C8A8, #5BA8D4);
  --mood-creative: linear-gradient(to bottom right, #D46BA8, #7B68C8);
  --mood-tech: linear-gradient(to bottom right, #5B7BD4, #4ECDC4);

  /* Card styles (host-chosen), top -> bottom */
  --style-sunset: linear-gradient(180deg, #A9580A, #904408);
  --style-ocean: linear-gradient(180deg, #036D91, #1B4F72);
  --style-forest: linear-gradient(180deg, #007351, #1B4D3E);
  --style-berry: linear-gradient(180deg, #AD397A, #5E2A84);
  --style-sand: linear-gradient(180deg, #F4E6CC, #E3C99B);
  --style-mint: linear-gradient(180deg, #E0F6EF, #AEE5D5);
  --style-lagoon: linear-gradient(180deg, #00716F, #176B89);
  --style-grape: linear-gradient(180deg, #694FC6, #3E2C8C);
  --style-coral: linear-gradient(180deg, #BE4E36, #B9475E);
  --style-midnight: linear-gradient(180deg, #3A3366, #1E1A33);
  --style-blush: linear-gradient(180deg, #FFE9EE, #FFC3D1);

  /* ---------- Date mode, Rose theme (date_palette.dart:130-149) ---------- */
  --date-rose: #D6264F;
  --date-rose-deep: #B3204A;
  --date-petal: #FF8AA5;
  --date-blush: #FFE4EA;
  --date-wine: #5C1530;
  --date-wine-soft: #8A3A55;
  --date-on-rose: #FFFFFF;
  --date-bg-top: #FFF1F4;
  --date-bg-mid: #FFE6EC;
  --date-bg-bottom: #FFF5EF;
  --date-surface: rgba(255,255,255,.85);
  --date-outline: rgba(214,38,79,.35);
  --date-band-off: #D5CEF2;
  --date-bg: linear-gradient(180deg, #FFF1F4 0%, #FFE6EC 45%, #FFF5EF 100%);
  --date-accent-grad: linear-gradient(135deg, #FF8AA5, #D6264F, #B3204A);
  --date-selected-grad: linear-gradient(90deg, #D6264F, #B3204A);

  /* ---------- Type ---------- */
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-date: "FrauncesDate", Georgia, serif;
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; /* iOS chrome only: status bar, keyboard */

  /* ---------- Spacing (app_theme.dart:279-287) ---------- */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px; --sp-xxl: 32px; --sp-xxxl: 48px;
  --gutter: 20px; /* tab-screen side padding */

  /* ---------- Radii ---------- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;
  --r-card: 16px; --r-card-photo: 20px; --r-sheet: 22px; --r-action-sheet: 24px; --r-button: 16px;

  /* ---------- Shadows ---------- */
  --sh-card: 0 4px 20px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --sh-tabbar: 0 -4px 20px rgba(123,104,200,.08);
  --sh-segment: 0 2px 12px rgba(123,104,200,.06);
  --sh-segment-active: 0 3px 12px rgba(78,205,196,.25);
  --sh-brand-button: 0 8px 18px rgba(123,104,200,.30);
  --sh-create-fab: 0 5px 18px rgba(78,205,196,.40);
  --sh-map-fab: 0 6px 18px rgba(59,175,168,.35);
  --sh-avatar: 0 0 12px rgba(123,104,200,.30);
  --sh-snackbar: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px rgba(0,0,0,.14), 0 1px 18px rgba(0,0,0,.12);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0,0,.58,1);
  --ease-in: cubic-bezier(.42,0,1,1);
  --ease-out-cubic: cubic-bezier(.215,.61,.355,1);
  --ease-in-cubic: cubic-bezier(.55,.055,.675,.19);
  --ease-in-out-cubic: cubic-bezier(.645,.045,.355,1);
  --ease-out-back: cubic-bezier(.175,.885,.32,1.275);
  --ease-decelerate: cubic-bezier(0,0,.2,1); /* Easing.legacyDecelerate: sheets */
  --dur-micro: 200ms;
  --dur-press: 100ms;
  --dur-push: 500ms;
  --dur-sheet-in: 250ms;
  --dur-sheet-out: 200ms;
}

/* ---------- Type scale (app_theme.dart:372-444). Colour included, as in the app's TextTheme. ---------- */
.t-display-l   { font: 800 32px/1.15 var(--font); letter-spacing: -.48px; color: var(--ink); }
.t-display-m   { font: 800 28px/1.15 var(--font); letter-spacing: -.42px; color: var(--ink); }
.t-display-s   { font: 800 24px/1.2  var(--font); letter-spacing: -.36px; color: var(--ink); }
.t-headline-l  { font: 800 28px/1.15 var(--font); letter-spacing: -.42px; color: var(--ink); }
.t-headline-m  { font: 800 24px/1.2  var(--font); letter-spacing: -.36px; color: var(--ink); }
.t-headline-s  { font: 800 20px/1.25 var(--font); letter-spacing: -.30px; color: var(--ink); }
.t-title-l     { font: 600 20px/1.4  var(--font); letter-spacing: 0;     color: var(--ink); }
.t-title-m     { font: 600 16px/1.5  var(--font); letter-spacing: .15px; color: var(--ink); }
.t-body-l      { font: 400 16px/1.5  var(--font); letter-spacing: .15px; color: var(--ink); }
.t-body-m      { font: 400 15px/1.43 var(--font); letter-spacing: .25px; color: var(--text-2); }
.t-body-s      { font: 400 13px/1.33 var(--font); letter-spacing: .4px;  color: var(--text-muted); }
.t-label-l     { font: 500 14px/1.43 var(--font); letter-spacing: .1px;  color: var(--ink); }
.t-label-m     { font: 500 12px/1.33 var(--font); letter-spacing: .5px;  color: var(--ink); }
.t-label-s     { font: 500 11px/1.4  var(--font); letter-spacing: .5px;  color: var(--text-muted); }
.t-floating    { font: 600 20px/1.65 var(--font); letter-spacing: -.2px; }
.t-row-action  { font: 600 14px/1.43 var(--font); letter-spacing: .25px; color: var(--primary); }
/* AppTextStyles.title(size): w800, -1.5% tracking. Use with an explicit font-size. */
.t-title       { font-family: var(--font); font-weight: 800; letter-spacing: -.015em; line-height: 1.25; color: var(--ink); }
/* dateMomentStyle(size): FrauncesDate 600, line-height 1.2, -1% tracking. */
.t-moment      { font-family: var(--font-date); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.t-grad        { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }