/* Secret Desires · Colors + Type tokens
   Source: secretdesiresmain/client · styles/v3/mobile/theme.css + tailwind.config.ts */

/* ---------- Fonts ----------
   Poppins = body / display (brand-uploaded TTFs, local)
   Roboto Flex = secondary display (Google Fonts)
   Roboto Mono = mono captions/timers (Google Fonts) */

/* Self-hosted Poppins — full 9×2 weight matrix */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Poppins-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 100; font-display: swap; src: url('fonts/Poppins-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/Poppins-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 200; font-display: swap; src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/Poppins-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/Poppins-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Poppins-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Poppins-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Poppins-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/Poppins-Black.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900; font-display: swap; src: url('fonts/Poppins-BlackItalic.ttf') format('truetype'); }

/* Roboto Flex — variable font, brand-uploaded */
@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url('fonts/RobotoFlex-VariableFont_GRAD_XOPQ_XTRA_YOPQ_YTAS_YTDE_YTFI_YTLC_YTUC_opsz_slnt_wdth_wght.ttf') format('truetype-variations');
}

/* Roboto Mono still from Google */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

:root {
  /* =========================================
     CORE COLOR TOKENS
     ========================================= */

  /* — Brand / Azalea scale (primary pink) — */
  --azalea-100: #fcdee2;
  --azalea-200: #f7a7b5;
  --azalea-300: #f46787;
  --azalea-400: #d62a5e;   /* base — the one you reach for 90% of the time */
  --azalea-500: #9b1b41;
  --azalea-600: #5f0026;
  --azalea-700: #29030c;
  --azalea-base: #d62a5e;
  --folly:      #f50057;   /* hotter pink used in gradients */
  --pink-soft:  #f5cbcb;   /* near-white pink accent */

  /* — Surface scale (warm near-blacks; the "late evening" mood) — */
  --surface-100: #d7d7d7;
  --surface-200: #b0b0b0;
  --surface-300: #8a8a8a;
  --surface-400: #666666;
  --surface-500: #444444;
  --surface-600: #252525;   /* default card surface */
  --surface-700: #111111;
  --surface-800: #0b0b0b;

  /* — Black scale (page / chrome) — */
  --bg:         #131313;    /* app background */
  --bg-dim:     #0b0b0b;    /* deeper tint */
  --border:     #3c3c3c;    /* hairline divider */
  --border-soft:rgba(191,191,191,.1);

  /* — White scale (foreground) — */
  --fg-1:       #eaeaea;    /* primary text */
  --fg-2:       #c2c2c2;    /* secondary text */
  --fg-3:       #9b9b9b;    /* tertiary / meta */
  --fg-4:       #777777;    /* placeholder / disabled */
  --fg-5:       #545454;    /* low-emphasis */
  --white:      #ffffff;

  /* — System / semantic — */
  --success: #00dd68;
  --warning: #fbc93e;
  --error:   #fd0048;
  --info:    #4a9eff;
  --brand-green: #34c759;   /* "online" dot / positive accent */

  /* =========================================
     GRADIENTS — the signature mood
     ========================================= */
  --grad-brand:
    linear-gradient(180deg, #f50057 0%, #d62a5e 100%);

  --grad-radial-bloom:     /* the warm pink bloom behind many screens */
    radial-gradient(50% 50% at 50% 50%, rgba(214,42,94,.32) 0%, rgba(0,0,0,1) 100%);
  --grad-radial-bloom-soft:
    radial-gradient(40% 40% at 50% 50%, rgba(214,42,94,.22) 0%, rgba(0,0,0,.85) 100%);
  --grad-card-sheen:
    linear-gradient(180deg, rgba(37,37,37,1) 0%, rgba(37,37,37,.4) 100%);
  --grad-max:
    radial-gradient(104% 104% at 77% 80%, #F00 0%, #A6244B 62.82%);
  --grad-ultra:
    radial-gradient(85% 85% at 76% 92%, #E914ED 0%, #A6244B 100%);
  --grad-ai-generate:
    linear-gradient(to bottom right, #f50057 0%, #d62a5e 51%, #c2c2c2 100%);

  /* =========================================
     TYPE TOKENS
     ========================================= */
  --font-sans:    'Poppins', system-ui, sans-serif;         /* body */
  --font-heading: 'Roboto Flex', 'Poppins', sans-serif;     /* display */
  --font-mono:    'Roboto Mono', ui-monospace, monospace;

  --text-2xs:  0.625rem;  /*  10 */
  --text-xs:   0.75rem;   /*  12 */
  --text-s:    0.875rem;  /*  14 */
  --text-m:    1rem;      /*  16 */
  --text-l:    1.125rem;  /*  18 */
  --text-xl:   1.5rem;    /*  24 */
  --text-2xl:  2rem;      /*  32 */
  --text-3xl:  2.5rem;    /*  40 */

  --leading-h1: 2.75rem;   /* 110% of 40 */
  --leading-h2: 2.2rem;    /* 110% of 32 */
  --leading-h3: 1.8rem;    /* 120% of 24 */
  --leading-h4: 1.2rem;    /* 120% of 16 */
  --leading-body: 1.4;

  /* =========================================
     SHAPE / ELEVATION
     ========================================= */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;        /* buttons & pills */
  --r-2xl: 24px;
  --r-card: 16px;
  --r-sheet: 40px;     /* big bottom sheets (`subCards`) */
  --r-full: 9999px;

  --shadow-card:       6px 6px 8px 0 rgb(19,19,19), -1px 2px 2px 0 rgb(19,19,19);
  --shadow-active:     2px 2px 18px 0 rgb(182,42,94), -1px 1px 5px 0 rgb(182,42,94);
  --shadow-primary:    3px 4px 8px 0 var(--azalea-400);
  --shadow-dark:       5px 8px 10px 0 var(--surface-600);

  /* =========================================
     MOTION
     ========================================= */
  --dur-1: 120ms;
  --dur-2: 200ms;   /* default */
  --dur-3: 400ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* =========================================
   SEMANTIC TEXT STYLES
   ========================================= */
.h1 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: var(--leading-h1);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: var(--leading-h2);
  font-weight: 800;
  color: var(--fg-1);
}
.h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-h3);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-1);
}
.h4 {
  font-family: var(--font-heading);
  font-size: var(--text-m);
  line-height: var(--leading-h4);
  font-weight: 700;
  color: var(--fg-1);
}
.body-l { font-size: var(--text-l);  line-height: 1.4; }
.body-m { font-size: var(--text-m);  line-height: 1.4; }
.body-s { font-size: var(--text-s);  line-height: 1.4; color: var(--fg-2); }
.caption { font-size: var(--text-xs); line-height: 1.4; color: var(--fg-3); letter-spacing: 0.01em; }
.mono   { font-family: var(--font-mono); letter-spacing: 0.02em; }

/* =========================================
   PRIMITIVE CLASSES (mirror of codebase)
   ========================================= */
.btn-primary {
  background: var(--azalea-400);
  color: var(--white);
  border: 2px solid var(--azalea-400);
  border-radius: var(--r-lg);
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.btn-primary:hover { background: var(--azalea-500); border-color: var(--azalea-500); }
.btn-primary:active { transform: scale(.98); }

.btn-ghost {
  background: transparent;
  color: var(--fg-1);
  border: 2px solid var(--azalea-400);
  border-radius: var(--r-lg);
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
}
.btn-ghost:hover { background: rgba(214,42,94,.15); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px;
  border-radius: var(--r-full);
  background: var(--surface-600);
  color: var(--fg-1);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease);
}
.pill:hover { outline: 2px double var(--azalea-400); }
.pill[data-selected="true"] { background: var(--azalea-400); }

.card {
  background: var(--surface-600);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

.surface {
  background: var(--surface-600);
}

.bg-bloom {
  background: var(--grad-radial-bloom);
}

.bg-brand-grad {
  background: var(--grad-brand);
}

.glass {
  background: rgba(40,40,40,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg);
}