/* ============================================================
   ONBLIDE — Design Tokens
   Foundation tokens for color, type, spacing, radii & shadows.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ------------------------------------------------------------
     COLORS — Brand
     ------------------------------------------------------------ */
  --ob-blue:        #0a4ee4;
  --ob-blue-700:    #0840b8;
  --ob-blue-100:    #e0eaff;
  --ob-blue-050:    #f1f5ff;

  --ob-green:       #779e3d;
  --ob-green-700:   #5f7f30;
  --ob-green-100:   #ecf3da;

  --ob-orange:      #eb7c2d;
  --ob-orange-700:  #c46220;
  --ob-orange-100:  #fde6d3;

  --ob-cream:       #f2f0e8;
  --ob-cream-soft:  #faf9f5;

  /* ------------------------------------------------------------
     COLORS — Neutrals
     ------------------------------------------------------------ */
  --ob-ink:         #545454;
  --ob-ink-strong:  #2a2a2a;
  --ob-ink-soft:    #7a7a7a;
  --ob-ink-mute:    #a8a8a8;

  --ob-line:        #ececec;
  --ob-line-soft:   #f4f4f4;
  --ob-surface:     #ffffff;
  --ob-surface-2:   #fbfbfb;

  /* ------------------------------------------------------------
     SEMANTIC TOKENS
     ------------------------------------------------------------ */
  --ob-fg:          var(--ob-ink);
  --ob-fg-strong:   var(--ob-ink-strong);
  --ob-fg-soft:     var(--ob-ink-soft);
  --ob-fg-mute:     var(--ob-ink-mute);
  --ob-fg-accent:   var(--ob-blue);
  --ob-fg-on-color: #ffffff;

  --ob-bg:          var(--ob-surface);
  --ob-bg-alt:      var(--ob-surface-2);
  --ob-bg-warm:     var(--ob-cream);

  --ob-border:      var(--ob-line);
  --ob-focus-ring:  rgba(10, 78, 228, 0.32);

  --ob-success:     var(--ob-green);
  --ob-success-bg:  var(--ob-green-100);
  --ob-warning:     var(--ob-orange);
  --ob-warning-bg:  var(--ob-orange-100);
  --ob-danger:      #d23838;
  --ob-danger-bg:   #fde2e2;

  /* ------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------ */
  --ob-font:        'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ob-font-serif:  'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --ob-font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ob-w-light:     300;
  --ob-w-regular:   400;
  --ob-w-medium:    500;
  --ob-w-semibold:  600;
  --ob-w-bold:      700;
  --ob-w-black:     800;

  --ob-fs-xs:       12px;
  --ob-fs-sm:       14px;
  --ob-fs-base:     16px;
  --ob-fs-md:       18px;
  --ob-fs-lg:       22px;
  --ob-fs-xl:       28px;
  --ob-fs-2xl:      36px;
  --ob-fs-3xl:      48px;
  --ob-fs-4xl:      64px;
  --ob-fs-5xl:      88px;

  --ob-lh-tight:    1.05;
  --ob-lh-snug:     1.2;
  --ob-lh-normal:   1.45;
  --ob-lh-relaxed:  1.6;

  --ob-tracking-tight: -0.02em;
  --ob-tracking-snug:  -0.01em;
  --ob-tracking-wide:   0.04em;

  /* ------------------------------------------------------------
     SPACING (4px base)
     ------------------------------------------------------------ */
  --ob-s-1:  4px;
  --ob-s-2:  8px;
  --ob-s-3:  12px;
  --ob-s-4:  16px;
  --ob-s-5:  24px;
  --ob-s-6:  32px;
  --ob-s-7:  48px;
  --ob-s-8:  64px;
  --ob-s-9:  96px;
  --ob-s-10: 128px;

  /* ------------------------------------------------------------
     RADII
     ------------------------------------------------------------ */
  --ob-r-xs:    4px;
  --ob-r-sm:    8px;
  --ob-r-md:    12px;
  --ob-r-lg:    16px;
  --ob-r-xl:    20px;
  --ob-r-pill:  999px;

  /* ------------------------------------------------------------
     SHADOWS
     ------------------------------------------------------------ */
  --ob-shadow-xs:  0 1px 2px rgba(20, 20, 20, 0.04);
  --ob-shadow-sm:  0 1px 3px rgba(20, 20, 20, 0.05), 0 1px 2px rgba(20, 20, 20, 0.03);
  --ob-shadow-md:  0 4px 12px rgba(20, 20, 20, 0.06), 0 1px 3px rgba(20, 20, 20, 0.04);
  --ob-shadow-lg:  0 12px 28px rgba(20, 20, 20, 0.08), 0 4px 8px rgba(20, 20, 20, 0.04);
  --ob-shadow-pop: 0 8px 24px rgba(10, 78, 228, 0.28);

  /* ------------------------------------------------------------
     MOTION
     ------------------------------------------------------------ */
  --ob-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --ob-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ob-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ob-dur-fast:    120ms;
  --ob-dur-base:    200ms;
  --ob-dur-slow:    400ms;
}