/* =============================================================
   Salesbook Design System — Colors & Typography
   Source of truth: 💎 Salesbook [DS].fig
   ============================================================= */

/* Font @import is hoisted to resources/css/app.css (must precede @import 'tailwindcss'). */

:root {
  /* ── BRAND ───────────────────────────────────────────────── */
  --sb-purple-100: #F2F0FD; /* surface tint, selected tab bg */
  --sb-purple-200: #C8C0F5; /* approximated mid swatch */
  --sb-purple-300: #9282EF; /* PRIMARY brand purple — UI accent */
  --sb-purple-500: #8A38F5; /* deep purple — system / annotation */
  --sb-purple-700: #311885; /* dark purple — used in deep accents */
  --sb-purple-soft: #F0EEFF; /* hint chip surfaces */
  --sb-purple-violet: #9747FF;

  /* ── BRAND VARIANTS — alternate themes (orange + brand-green) */
  --sb-orange-100: #FFE6D9;
  --sb-orange-200: #FFB890;
  --sb-orange-300: #FF8A47;
  --sb-brand-green: #29877D; /* cover hero text colour */
  --sb-brand-green-100: #E1FFED;

  /* ── NEUTRALS ────────────────────────────────────────────── */
  --sb-grey-100: #FFFFFF;
  --sb-grey-200: #F5F5F5;
  --sb-grey-300: #D4D4D4;
  --sb-grey-400: #A9A9A9;
  --sb-grey-500: #707070;
  --sb-grey-600: #4C4C4C; /* default text colour — used everywhere */
  --sb-ink: #383838;
  --sb-black: #000000;

  /* ── SEMANTIC ────────────────────────────────────────────── */
  --sb-red-100: #FFF2F2;
  --sb-red-200: #FFD6D9;
  --sb-red-300: #FD6262; /* error / negative CTA */
  --sb-red-deep: #D80027;

  --sb-green-100: #E7FFE6;
  --sb-green-300: #44AB68; /* success / positive */

  --sb-blue-100: #E1EEFF;
  --sb-blue-200: #E6F1FF;
  --sb-blue-300: #2FA4ED; /* info */
  --sb-blue-deep: #0052B4;
  --sb-blue-muted: #3D78B3;

  --sb-brown-100: #FFFDE6;
  --sb-brown-300: #B3823D;

  --sb-yellow-100: #FFF1C9;

  /* Cover/marketing surfaces */
  --sb-paper: #F3ECE2;
  --sb-cover-blue: #C6D6F0;

  /* ── SURFACES ────────────────────────────────────────────── */
  --sb-bg: var(--sb-grey-200);
  --sb-surface: #FFFFFF;
  --sb-border: var(--sb-grey-300);
  --sb-border-soft: rgba(0,0,0,0.08);
  --sb-divider: rgba(0,0,0,0.12);

  /* ── ELEVATION ───────────────────────────────────────────── */
  --sb-shadow-card: 0px 8px 32px -16px rgba(0,0,0,0.16);
  --sb-shadow-tile-purple: 0px 40px 72px -32px rgba(146,130,239,1);
  --sb-shadow-pill-success: 0px 16px 32px -8px rgba(68,171,104,0.16);
  --sb-shadow-pill-error: 0px 16px 32px -8px rgba(253,98,98,0.16);
  --sb-shadow-ai-glow: 0px 8px 32px -16px rgba(146,130,239,0.48);
  --sb-focus-ring: 0px 0px 0px 4px rgba(31,81,229,0.08);

  /* ── RADII ───────────────────────────────────────────────── */
  --sb-r-xs: 4px;   /* message chip */
  --sb-r-sm: 6px;   /* tab pill */
  --sb-r-md: 8px;   /* input, button, badge */
  --sb-r-lg: 16px;  /* surfaces / panels */
  --sb-r-xl: 24px;  /* hero tile, big cards */
  --sb-r-pill: 32px;
  --sb-r-circle: 999px;

  /* ── SPACING (4-pt grid) ─────────────────────────────────── */
  --sb-s-1: 4px;
  --sb-s-2: 8px;
  --sb-s-3: 12px;
  --sb-s-4: 16px;
  --sb-s-5: 24px;
  --sb-s-6: 32px;
  --sb-s-7: 48px;
  --sb-s-8: 64px;
  --sb-s-9: 80px;

  /* ── TYPOGRAPHY (raw scale) ──────────────────────────────── */
  --sb-font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sb-font-display: "DM Sans", system-ui, sans-serif;     /* same family, used at 80–112px on covers */
  --sb-font-numeric: "Sora", "DM Sans", monospace;          /* dense numerics / counters */

  /* heading scale — DM Sans 700 / lh 1 / -4% LS */
  --sb-h1-size: 32px;
  --sb-h2-size: 24px;
  --sb-h3-size: 18px;
  --sb-tile-size: 22px;       /* tile titles ("Rozpocznij…") */
  --sb-display-size: 80px;    /* cover hero */
  --sb-display-xl: 112px;     /* cover client name */

  /* body scale */
  --sb-body-size: 16px;
  --sb-body-lh: 24px;
  --sb-small-size: 14px;
  --sb-small-lh: 16px;
  --sb-tiny-size: 12px;
  --sb-tiny-lh: 16px;
  --sb-supa-size: 7px;        /* swatch labels in spec page */
}

/* =============================================================
   SEMANTIC ROLES
   ============================================================= */

html, body { background: var(--sb-grey-200); color: var(--sb-grey-600); font-family: var(--sb-font-sans); }

.sb-h1, h1.sb { font: 700 var(--sb-h1-size)/1 var(--sb-font-display); letter-spacing: -0.04em; color: var(--sb-grey-600); margin: 0; }
.sb-h2, h2.sb { font: 700 var(--sb-h2-size)/1 var(--sb-font-display); letter-spacing: -0.04em; color: var(--sb-grey-600); margin: 0; }
.sb-h3, h3.sb { font: 700 var(--sb-h3-size)/1 var(--sb-font-display); letter-spacing: -0.04em; color: var(--sb-grey-600); margin: 0; }
.sb-tile-title { font: 700 var(--sb-tile-size)/1 var(--sb-font-display); letter-spacing: -0.04em; color: #fff; margin: 0; }
.sb-display    { font: 700 var(--sb-display-size)/1 var(--sb-font-display); letter-spacing: -0.04em; color: var(--sb-brand-green); margin: 0; }
.sb-display-xl { font: 700 var(--sb-display-xl)/1   var(--sb-font-display); letter-spacing: -0.04em; color: var(--sb-brand-green); margin: 0; }

.sb-body         { font: 400 var(--sb-body-size)/var(--sb-body-lh) var(--sb-font-sans); color: var(--sb-grey-600); }
.sb-body-strong  { font: 600 var(--sb-body-size)/var(--sb-body-lh) var(--sb-font-sans); color: var(--sb-grey-600); }
.sb-small        { font: 400 var(--sb-small-size)/var(--sb-small-lh) var(--sb-font-sans); color: var(--sb-grey-600); }
.sb-small-medium { font: 500 var(--sb-small-size)/var(--sb-small-lh) var(--sb-font-sans); letter-spacing: -0.02em; color: var(--sb-grey-600); }
.sb-small-bold   { font: 600 var(--sb-small-size)/var(--sb-small-lh) var(--sb-font-sans); color: var(--sb-grey-600); }
.sb-tiny         { font: 400 var(--sb-tiny-size)/var(--sb-tiny-lh) var(--sb-font-sans); color: var(--sb-grey-600); }
.sb-label        { font: 500 var(--sb-tiny-size)/var(--sb-tiny-lh) var(--sb-font-sans); letter-spacing: -0.02em; color: var(--sb-grey-600); }
.sb-supa         { font: 500 var(--sb-supa-size)/1 var(--sb-font-sans); letter-spacing: -0.04em; color: var(--sb-black); opacity: 0.5; text-transform: lowercase; }
.sb-link         { font: 400 var(--sb-small-size)/var(--sb-small-lh) var(--sb-font-sans); color: var(--sb-purple-300); text-decoration: underline; }

.sb-eyebrow {
  font: 500 var(--sb-tiny-size)/1 var(--sb-font-sans);
  letter-spacing: -0.04em;
  color: var(--sb-black);
  opacity: 0.16;
  text-transform: lowercase;
}