/* ============================================================
   Orrish Loans - Design Tokens
   Brand values sourced from config/orrish.json
   ============================================================ */

:root {
  /* --- Brand colors (config/orrish.json) --- */
  --primary: #0B5ED7;          /* PRIMARY_COLOR  0xFF0B5ED7 */
  --primary-600: #0A53BF;
  --primary-700: #08429A;
  --primary-050: #E7EFFB;
  --secondary: #F88A00;        /* SECONDARY_COLOR 0xFFFF9F00 */
  --accent: #F47C00;           /* ACCENT_COLOR   0xFFF47C00 */
  --gradient-2: #32A8DC;       /* GRADIENT_COLOR 0xFF32A8DC */
  --success: #16A34A;          /* SUCCESS_COLOR  0xFF16A34A */
  --warning: #FFB22E;          /* WARNING_COLOR  0xFFFFB22E */
  --danger:  #DC2626;

  /* Background gradient (config) */
  --bg: #FFFFFF;
  --bg-start: #FFE9D2;         /* BACKGROUND_GRADIENT_START (warmer) */
  --bg-end:   #D6EAFC;         /* BACKGROUND_GRADIENT_END   (cooler) */
  --bg-tint:  #F5F9FF;
  --tint-cool: linear-gradient(180deg, #EAF4FF 0%, #F7FBFF 60%, var(--bg) 100%);
  --tint-warm: linear-gradient(180deg, #FFF1E4 0%, #FFF9F3 60%, var(--bg) 100%);

  /* --- Neutral grayscale --- */
  --ink-900: #0B1020;
  --ink-800: #111827;
  --ink-700: #1F2937;
  --ink-600: #374151;
  --ink-500: #6B7280;
  --ink-400: #9CA3AF;
  --ink-300: #D1D5DB;
  --ink-200: #E5E7EB;
  --ink-100: #F3F4F6;
  --ink-50:  #F9FAFB;
  --white:   #FFFFFF;

  /* --- Gradients --- */
  --grad-brand: linear-gradient(135deg, var(--primary) 0%, var(--gradient-2) 100%);
  --grad-cta:   linear-gradient(135deg, var(--primary) 0%, var(--primary-600) 100%);
  --grad-warm:  linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
  --grad-cool:  linear-gradient(135deg, var(--gradient-2) 0%, var(--primary) 100%);
  --grad-text:  linear-gradient(120deg, var(--primary) 0%, var(--accent) 100%);
  --grad-vivid: linear-gradient(120deg, var(--primary) 0%, var(--gradient-2) 42%, var(--secondary) 100%);
  --grad-sunrise: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 55%, #FF6B6B 100%);
  --grad-ocean: linear-gradient(135deg, var(--primary-700) 0%, var(--primary) 45%, var(--gradient-2) 100%);
  --grad-mesh-a: radial-gradient(circle, rgba(11,94,215,0.62), transparent 70%);
  --grad-mesh-b: radial-gradient(circle, rgba(50,168,220,0.58), transparent 70%);
  --grad-mesh-c: radial-gradient(circle, rgba(248,138,0,0.55), transparent 70%);
  --grad-mesh-d: radial-gradient(circle, rgba(244,124,0,0.45), transparent 70%);

  /* --- Typography (config: DISPLAY_FONT Poppins / BODY_FONT Inter) --- */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale */
  --fs-hero: clamp(1.95rem, 1.35rem + 3vw, 3.4rem);
  --fs-h2:   clamp(1.5rem, 1.15rem + 1.7vw, 2.3rem);
  --fs-h3:   clamp(1.05rem, 0.95rem + 0.45vw, 1.25rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.75rem;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* --- Spacing scale --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* --- Radii (config) --- */
  --r-chip: 8px;     /* CHIP_RADIUS */
  --r-btn: 12px;     /* BUTTON_RADIUS / INPUT_RADIUS */
  --r-card: 16px;    /* CARD_RADIUS */
  --r-lg: 20px;      /* DIALOG/BOTTOM_SHEET_RADIUS */
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Shadows (premium elevation) --- */
  --sh-xs: 0 1px 2px rgba(11, 16, 32, 0.06);
  --sh-sm: 0 2px 10px rgba(11, 16, 32, 0.06);
  --sh-md: 0 10px 28px rgba(11, 16, 32, 0.08);
  --sh-lg: 0 20px 50px rgba(11, 16, 32, 0.12);
  --sh-xl: 0 34px 74px rgba(11, 16, 32, 0.18);
  --sh-primary: 0 14px 32px rgba(11, 94, 215, 0.32);
  --sh-warm: 0 14px 32px rgba(244, 124, 0, 0.30);
  --sh-glow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  --sh-cool-lg: 0 22px 48px rgba(11, 94, 215, 0.22);
  --sh-warm-lg: 0 22px 48px rgba(244, 124, 0, 0.24);

  /* --- Glass --- */
  --glass-bg: rgba(255, 255, 255, 0.66);
  --glass-border: rgba(255, 255, 255, 0.75);
  --glass-blur: 16px;

  /* --- Layout --- */
  --container: 82.5rem;       /* 1320px @16px */
  --container-narrow: 52rem;
  --header-h: 76px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;
}