/*
 * Blissful Tribe — design tokens (S0 component library)
 *
 * Generated 2026-10-08 from Figma file X01urgBd8stPyRkyjeD4DS ("Blissful tribe"),
 * page "Colors&Types&Icons" (colours 1:3, type 3:4) and the variables bound on the
 * "Components" page (get_variable_defs on 24:683, 56:233, 59:212, 62:122).
 *
 * Light theme only: the design has no dark theme.
 * Font: Montserrat (Google Fonts). Load it in the page:
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap">
 * Figma's "Regular" paragraph styles are Montserrat MEDIUM (500); "Bold" is 700.
 */

:root {
  color-scheme: light;

  /* ---- Primary (Figma "Primary/…") ---- */
  --primary-50: #FAE5EB;
  --primary-100: #F4BECE;
  --primary-200: #EE96AF;
  --primary-300: #E76F90;
  --primary-400: #E15579;
  --primary-500: #DC4364;
  --primary-600: #CB3F61;
  --primary-700: #B53A5B;
  --primary-800: #A03556;
  --primary-900: #7A2E4C;

  /* ---- Secondary (Figma "Secondary/…") ---- */
  --secondary-50: #DEF2FC;
  --secondary-100: #C0DDE5;
  --secondary-200: #A1C4CF;
  --secondary-300: #81AAB8;
  --secondary-400: #6897A6;
  --secondary-500: #4E8495;
  --secondary-600: #427584;
  --secondary-700: #34606E;
  --secondary-800: #274D59;
  --secondary-900: #153742;

  /* ---- Neutro (Figma "Neutro/…") ----
     200 and 400 are bound on components but are NOT drawn in the colour frame 1:3. */
  --neutro-fff: #FFFFFF;
  --surface: var(--neutro-fff);     /* a card, a panel, a field: dark in the dark theme (S15) */
  --on-color: #FFFFFF;              /* text on a coloured fill: white in every theme (S15) */
  --neutro-50: #F9F8F9;
  --neutro-100: #F7F6F6;
  --neutro-200: #F2F1F1;
  --neutro-300: #E6E5E5;
  --neutro-400: #C4C3C3;
  --neutro-500: #A5A4A4;
  --neutro-600: #7C7B7B;
  --neutro-700: #676666;
  --neutro-800: #484747;
  --neutro-900: #262626;

  /* ---- Status (Figma "Alert", "Success", "Error") — bound on Chip / Input text,
     not drawn in the colour frame 1:3. ---- */
  --alert: #FF7B0F;
  --success: #158B21;
  --error: #FF1111;

  /* ---- Spacing (Figma "Spacing/…"; the 80 is spelled "spacin9-xxxxxxl" in Figma) ---- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 40px;
  --space-xxxxxxl: 80px;

  /* ---- Radius (Figma "Border radius/…") and stroke ---- */
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-chip: 12px;   /* chips use Spacing/spacing-s as their radius */
  --radius-xl: 32px;
  --radius-pill: 99px;   /* Input / Selector 515:4256 — a literal, not a variable */
  --stroke-s: 1px;

  /* ---- Type ---- */
  --font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* shorthand: weight size/line-height family */
  --font-h1: 700 48px/1 var(--font-family);            /* H1/Bold */
  --font-h2: 700 32px/1 var(--font-family);            /* H2/Bold */
  --font-h3: 700 24px/32px var(--font-family);         /* H3/Bold */
  --font-h4: 700 20px/1 var(--font-family);            /* H4/Bold */
  --font-p1: 500 16px/1 var(--font-family);            /* Paragraph 01/Regular */
  --font-p1-bold: 700 16px/1 var(--font-family);       /* Paragraph 01/Bold */
  --font-p2: 500 14px/19px var(--font-family);         /* Paragraph 02/Regular */
  --font-p2-bold: 700 14px/1 var(--font-family);       /* Paragraph 02/Bold */
  --font-note: 500 12px/1 var(--font-family);          /* Note/regular */
  --font-helper: 500 10px/1 var(--font-family);        /* helper text in Input text — NOT a Figma style */

  /* Figma's "lineHeight 100" renders as `normal` (~1.22) in the reference code for
     multi-line text; the type classes below use `normal` for paragraphs so wrapped
     text matches the frames. */

  /* ---- Elevation (View bar 284:649) ---- */
  --shadow-bar: 0 4px 6px rgba(0, 0, 0, 0.25);
}

/* ---- Type utility classes ---- */
.t-h1 { font: var(--font-h1); line-height: normal; }
.t-h2 { font: var(--font-h2); line-height: normal; }
.t-h3 { font: var(--font-h3); }
.t-h4 { font: var(--font-h4); line-height: normal; }
.t-p1 { font: var(--font-p1); line-height: normal; }
.t-p1-bold { font: var(--font-p1-bold); line-height: normal; }
.t-p2 { font: var(--font-p2); }
.t-p2-bold { font: var(--font-p2-bold); line-height: normal; }
.t-note { font: var(--font-note); line-height: normal; }