/*
  Stematiko brand design tokens — CSS custom properties.
  Framework-agnostic. Drop into any web project and reference var(--st-*).
  Generated from tokens.json (the source of truth). Prefix: --st-

  Font: Fredoka (Google Fonts). Load it however your stack prefers, e.g.:
    @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');
*/

:root {
  /* ---- Color: raw palette ---- */
  --st-color-white: #FFFFFF;
  --st-color-black: #1B1B1B;        /* headings / near-black, not pure */
  --st-color-ink: #000000;

  --st-color-teal: #00BBAE;         /* primary brand */
  --st-color-orange: #FF9B24;       /* primary CTA */
  --st-color-orange-soft: #FFA455;
  --st-color-pink: #FF577B;
  --st-color-coral: #FF7C7C;
  --st-color-periwinkle: #7C81FF;
  --st-color-sky: #00B9F1;

  --st-color-cream: #FFF8EB;
  --st-color-cream-2: #FFF6EB;
  --st-color-mint-tint: #EBFFFE;
  --st-color-peach-tint: #FFECD6;

  --st-color-grey-100: #E6E6E6;
  --st-color-grey-warm: #E9CFCF;
  --st-color-text-body: #424242;

  /* ---- Color: semantic roles (reference these in app code) ---- */
  --st-primary: var(--st-color-teal);
  --st-cta: var(--st-color-orange);
  --st-accent-pink: var(--st-color-pink);
  --st-accent-coral: var(--st-color-coral);
  --st-accent-periwinkle: var(--st-color-periwinkle);
  --st-accent-sky: var(--st-color-sky);

  --st-text: var(--st-color-text-body);
  --st-text-strong: var(--st-color-ink);
  --st-heading: var(--st-color-black);

  --st-surface: var(--st-color-white);
  --st-surface-muted: var(--st-color-grey-100);
  --st-surface-warm: var(--st-color-grey-warm);
  --st-surface-cream: var(--st-color-cream);
  --st-surface-mint: var(--st-color-mint-tint);
  --st-surface-peach: var(--st-color-peach-tint);
  --st-surface-dark: var(--st-color-black);

  --st-border: var(--st-color-grey-100);

  --st-gradient-hero: linear-gradient(100.88deg, #EBFFFE 0.6%, #FFF6EB 100%);

  /* ---- Typography ---- */
  --st-font-sans: 'Fredoka', sans-serif;

  --st-fw-regular: 400;
  --st-fw-medium: 500;
  --st-fw-semibold: 600;   /* default heading weight */
  --st-fw-bold: 700;       /* h1 */

  --st-fz-body: 18px;
  --st-fz-h1: 96px;
  --st-fz-h2: 64px;
  --st-fz-h3: 32px;
  --st-fz-h4: 23px;
  --st-fz-h5: 16px;
  --st-fz-h6: 16px;

  --st-lh-body: 1.44;
  --st-lh-prose: 1.67;
  --st-lh-heading: 1.25;
  --st-lh-h3: 1.5;
  --st-lh-h4: 1.7;
  --st-lh-h6: 2;

  /* ---- Spacing (5px grid; add more multiples as needed) ---- */
  --st-space-base: 5px;
  --st-space-1: 5px;
  --st-space-2: 10px;
  --st-space-3: 15px;
  --st-space-4: 20px;
  --st-space-5: 25px;
  --st-space-6: 30px;
  --st-space-8: 40px;
  --st-space-10: 50px;
  --st-space-12: 60px;
  --st-space-16: 80px;
  --st-space-20: 100px;
  --st-space-24: 120px;

  /* ---- Radius ---- */
  --st-radius-sm: 12px;
  --st-radius-md: 16px;
  --st-radius-lg: 24px;      /* default card */
  --st-radius-xl: 32px;
  --st-radius-pill: 50px;    /* buttons / chips */
  --st-radius-circle: 50%;

  /* ---- Shadow ---- */
  --st-shadow-sm: 0px 4px 10px rgba(3, 4, 28, 0.1);
  --st-shadow-md: 0px 20px 30px rgba(3, 4, 28, 0.1);
  --st-shadow-lg: 0px 30px 60px rgba(3, 4, 28, 0.1);

  /* ---- Motion ---- */
  --st-duration-base: 300ms;
  --st-duration-slow: 500ms;
  --st-ease-out: ease-out;
  --st-ease-expressive: cubic-bezier(0.19, 1, 0.22, 1);

  /* ---- Breakpoints (for reference; use in media queries) ---- */
  --st-bp-sm: 576px;
  --st-bp-md: 768px;
  --st-bp-lg: 992px;
  --st-bp-xl: 1200px;
  --st-bp-xxl: 1400px;
  --st-container-max: 1320px;
}