/* InsurMe — Design Tokens
 * Mirror of 04-design-system.md.
 * If you change a value here, change the doc too.
 * Insurme teal palette.
 */

:root {
  /* Color — brand */
  --color-primary:        #015048;
  --color-primary-700:    #013c36;
  --color-primary-300:    #4a8079;
  --color-accent:         #00A887;
  --color-accent-bright:  #2ED9C3;

  /* Color — ink */
  --color-ink:            #06262D;
  --color-ink-muted:      #54707A;
  --color-ink-subtle:     #8DA1A8;

  /* Color — surfaces & lines */
  --color-line:           #E3EAEC;
  --color-line-strong:    #C7D4D7;
  --color-surface:        #FFFFFF;
  --color-surface-muted:  #F4F8F8;
  --color-surface-sunken: #EAF1F1;

  /* Color — semantic */
  --color-warning:        #C77700;
  --color-warning-soft:   #FCEBC9;
  --color-danger:         #B33A3A;
  --color-danger-soft:    #F8DBD7;
  --color-success:        #0E8A6A;
  --color-success-soft:   #D6F0E5;
  --color-info:           #1A6E8E;
  --color-info-soft:      #DBEDF3;

  /* Spacing (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(6, 38, 45, 0.05);
  --shadow-md: 0 4px 12px rgba(6, 38, 45, 0.08);
  --shadow-lg: 0 12px 32px rgba(6, 38, 45, 0.12);
  --shadow-focus: 0 0 0 3px rgba(0, 168, 135, 0.35);

  /* Motion */
  --motion-quick: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-base:  200ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-slow:  320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Type — sizes */
  --type-display:      56px;
  --type-display-lh:   60px;
  --type-h1:           40px;
  --type-h1-lh:        48px;
  --type-h2:           28px;
  --type-h2-lh:        36px;
  --type-h3:           20px;
  --type-h3-lh:        28px;
  --type-h4:           17px;
  --type-h4-lh:        24px;
  --type-body:         16px;
  --type-body-lh:      24px;
  --type-small:        14px;
  --type-small-lh:     20px;
  --type-micro:        12px;
  --type-micro-lh:     16px;

  /* Font stack — Swiss typography
   * Helvetica Neue first (the canonical Swiss sans), then Inter as a modern
   * crisp fallback, then system-ui. Avoids Arial unless absolutely necessary —
   * Arial is the wrong silhouette for Swiss work.
   */
  --font-sans: "Helvetica Neue", "Helvetica", "Inter", ui-sans-serif, system-ui,
               -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono",
               Menlo, Consolas, monospace;

  /* Numerals — lining + tabular by default so columns of CHF figures align. */
  --font-features-num: "tnum" 1, "lnum" 1, "cv11" 1;
  /* Body features — kerning + standard ligatures. No discretionary ligatures. */
  --font-features-body: "kern" 1, "liga" 1;

  /* Layout */
  --container-max: 1280px;
  --container-pad-mobile: 24px;
  --container-pad-tablet: 48px;
  --container-pad-desktop: 80px;
}

@media (max-width: 768px) {
  :root {
    --type-display: 40px;
    --type-display-lh: 44px;
    --type-h1: 28px;
    --type-h1-lh: 34px;
  }
}