/* ============================================================
   Sorelo theme override — same palette & fonts as the Flutter app
   (see lib/theme/studio_palette.dart -> StudioPalette.dark,
   assets/fonts/Comfortaa-*.ttf, assets/fonts/KookMobile-*.ttf)
   Loaded after main.css; overrides its CSS custom properties so
   every existing rule in main.css (which is built entirely on
   hsl(var(--...))) repaints with the new palette automatically.
============================================================== */

@font-face {
  font-family: 'Comfortaa';
  src: url('../fonts/app/Comfortaa-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Comfortaa';
  src: url('../fonts/app/Comfortaa-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Comfortaa';
  src: url('../fonts/app/Comfortaa-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Comfortaa';
  src: url('../fonts/app/Comfortaa-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Comfortaa';
  src: url('../fonts/app/Comfortaa-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'KookMobile';
  src: url('../fonts/app/KookMobile-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'KookMobile';
  src: url('../fonts/app/KookMobile-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Fonts — Comfortaa for English, KookMobile as fallback for any Persian/Arabic text */
  --body-font: "Comfortaa", "KookMobile", sans-serif;
  --title-font: "Comfortaa", "KookMobile", sans-serif;

  /* Brand gradient: violet wash -> signature pink */
  --base-h: 333;
  --base-s: 89%;
  --base-l: 60%;
  --base-two-h: 262;
  --base-two-s: 83%;
  --base-two-l: 58%;

  /* Primary/secondary duplicate base/base-two in the original template */
  --primary-h: 333;
  --primary-s: 89%;
  --primary-l: 60%;
  --secondary-h: 262;
  --secondary-s: 83%;
  --secondary-l: 58%;

  /* Backgrounds */
  --black: 231 33% 8%;         /* bg #0D0F1A */
  --black-two: 233 17% 10%;    /* groupSurfaceSolid #16171F */
  --black-three: 233 17% 10%;
  --black-four: 233 17% 10%;
  --black-five: 233 17% 10%;
  --black-six: 233 17% 10%;
  --section-bg: 231 33% 8%;
  --section-bg-two: 233 17% 10%;

  /* Text */
  --white: 225 22% 96%;        /* text #F4F5F8 */
  --body-color: 225 4% 56%;    /* ~textMuted, blended over bg */
  --gray: 225 4% 56%;
  --title-color: 281 35% 9%;   /* accentInk #1A0F1F, for text on accent-fill elements */

  /* Borders — used in main.css as hsl(var(--border-color)/N%), so making
     this pure white lets the existing alpha suffixes become white-alpha
     borders matching the app's groupBorder/divider tokens. */
  --border-color: 0 0% 100%;
}