/*
 * Sorta Design System — Colors & Typography
 * Source of truth for all Sorta brand tokens.
 * Font: Poppins (Google Fonts)
 * =========================================================
 */

/* Poppins — only the weights used by the public site */
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

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

  /* --- Brand Core --- */
  --color-navy:        #000054;   /* Dominant foundation, text, headings */
  --color-blue:        #2740fc;   /* Primary CTA / electric accent */
  --color-ocean:       #2886f9;   /* Hover state for primary blue */
  --color-teal:        #02e3d3;   /* Success / done / synced indicator */

  /* --- Brand Tints (icon layers) --- */
  --color-sky:         #66bdff;   /* Top layer of S-icon */
  --color-electric:    #2740fc;   /* Alias — same as --color-blue */

  /* --- Soft palette (backgrounds, chips, hover fills) --- */
  --color-lavender:    #d1e4ff;   /* Hover bg, selected chip, banner tint */
  --color-periwinkle:  #99bdff;   /* Borders on hover, mid-level tint */
  --color-ice:         #c7e7ff;   /* Patient pill hover, light surface */
  --color-mint:        #ccf9f6;   /* Teal success bg, teal pill bg */

  /* --- Neutrals --- */
  --color-white:       #ffffff;
  --color-bg:          #f8fafc;   /* App background (gray-50) */
  --color-gray-50:     #f8fafc;
  --color-gray-100:    #f1f5f9;
  --color-gray-200:    #e2e8f0;   /* Default border */
  --color-gray-300:    #cbd5e1;
  --color-gray-400:    #94a3b8;   /* Placeholder, muted text */
  --color-gray-500:    #64748b;   /* Secondary body text */
  --color-gray-700:    #334155;   /* Primary body text */
  --color-gray-900:    #0f172a;   /* Darkest text */

  /* --- Semantic --- */
  --color-error:       #ef4444;
  --color-warning:     #f59e0b;
  --color-amber:       #f59e0b;
  --color-success:     #02e3d3;   /* = teal */
  --color-success-bg:  #ccf9f6;   /* = mint */
  --color-success-text:#065f46;

  /* --- Marketing site extras --- */
  --color-charcoal:    #1a1a2a;
  --color-bg-site:     #fdfdfd;

  /* =========================================================
     SEMANTIC SURFACE TOKENS
     ========================================================= */
  --surface-page:         var(--color-bg);
  --surface-card:         var(--color-white);
  --surface-card-border:  var(--color-gray-200);
  --surface-dark:         var(--color-navy);
  --surface-banner:       linear-gradient(135deg, #d1e4ff 0%, #e8fbf8 55%, #ccf9f6 100%);

  --text-primary:    var(--color-navy);
  --text-body:       var(--color-gray-700);
  --text-secondary:  var(--color-gray-500);
  --text-muted:      var(--color-gray-400);
  --text-on-dark:    var(--color-white);
  --text-link:       var(--color-blue);

  --border-default:  var(--color-gray-200);
  --border-focus:    var(--color-blue);
  --border-focus-ring: rgba(39, 64, 252, 0.15);

  /* =========================================================
     RADIUS TOKENS
     ========================================================= */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-card: 16px;
  --radius-pill: 9999px;

  /* =========================================================
     SHADOW TOKENS
     ========================================================= */
  --shadow-sm:       0 1px 3px rgba(0,0,84,0.04), 0 1px 2px rgba(0,0,84,0.06);
  --shadow-md:       0 4px 12px rgba(0,0,84,0.08);
  --shadow-card:     0 2px 16px rgba(0,0,84,0.06);
  --shadow-float:    0 20px 25px -5px rgba(0,0,84,0.08), 0 8px 10px -6px rgba(0,0,84,0.05);
  --shadow-button:   0 2px 8px rgba(39,64,252,0.30);
  --shadow-button-hover: 0 4px 16px rgba(39,64,252,0.40);

  /* =========================================================
     SPACING SCALE
     ========================================================= */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24: 96px;

  /* =========================================================
     TYPOGRAPHY TOKENS
     ========================================================= */
  --font-primary: 'Poppins', system-ui, sans-serif;

  /* Scale */
  --text-xs:    0.6875rem;   /* 11px — eyebrow, kicker, uppercase label */
  --text-sm:    0.8125rem;   /* 13px — meta, caption */
  --text-base:  0.9375rem;   /* 15px — body */
  --text-md:    1rem;        /* 16px — standard body */
  --text-lg:    1.125rem;    /* 18px — lead paragraph */
  --text-xl:    1.25rem;     /* 20px — sub-heading */
  --text-2xl:   1.5rem;      /* 24px — card title */
  --text-3xl:   2rem;        /* 32px — section heading */
  --text-4xl:   2.5rem;      /* 40px — large display */
  --text-5xl:   3rem;        /* 48px — hero heading */
  --text-6xl:   4rem;        /* 64px — hero large */
  --text-7xl:   7rem;        /* 112px — oversized decorative */

  /* Weights */
  --fw-light:   300;        /* @kind font */
  --fw-regular: 400;        /* @kind font */
  --fw-medium:  500;        /* @kind font */
  --fw-semibold:600;        /* @kind font */
  --fw-bold:    700;        /* @kind font */
  --fw-extrabold:800;       /* @kind font */

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.6;

  /* Letter spacing */
  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.10em;
  --tracking-widest: 0.12em;
}

/* Region switcher shared by every public page. */
.site-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: 9999px;
  background: #fff;
  color: var(--color-navy);
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, color .15s, transform .15s;
}
.site-switcher:hover {
  border-color: var(--color-periwinkle);
  color: var(--color-blue);
  transform: translateY(-1px);
}
.site-switcher-flag { font-size: 16px; line-height: 1; }

/* =========================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================= */

/* Headings */
h1, .h1 {
  font-family: var(--font-primary);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
h2, .h2 {
  font-family: var(--font-primary);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
h3, .h3 {
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}
h4, .h4 {
  font-family: var(--font-primary);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* Body */
p, .body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  color: var(--text-body);
}
.body-sm {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.lead {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* Special */
.eyebrow, .kicker {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-teal);
}
.label {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-body);
}
.caption {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.mono {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: var(--text-sm);
  color: var(--text-body);
}

/* Display / hero */
.display-xl {
  font-size: var(--text-6xl);
  font-weight: var(--fw-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.display-lg {
  font-size: var(--text-5xl);
  font-weight: var(--fw-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.display-lg strong {
  font-weight: var(--fw-bold);
}