/* =========================================================
   OctopiPoker — Colors & Type
   Source of truth for CSS variables used across the design
   system, UI kits, and slides.
   ========================================================= */

/* ---------- Google Fonts (Poppins + Inter) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600&family=Poppins:wght@500;600;700&family=Kalam:wght@400;700&display=swap');

:root {
  /* ----- Base ----- */
  --op-white: #FFFFFF;
  --op-black: #25282D;            /* Brand black, not pure black */

  /* ----- Neutral scale (cool grays, slightly bluish) ----- */
  --op-neutral-5:  #FAFAFA;
  --op-neutral-10: #EEEFF1;
  --op-neutral-20: #DDE0E4;
  --op-neutral-30: #CACDD4;
  --op-neutral-40: #B6BBC4;
  --op-neutral-50: #9DA3AF;
  --op-neutral-60: #7B8493;
  --op-neutral-70: #535A66;
  --op-neutral-80: #454A54;
  --op-neutral-90: #2E3238;

  /* ----- Exodus Fruit (primary brand: purple #6C5CE7) ----- */
  --op-exodus-5:  #F7F6FE;
  --op-exodus-10: #F3F2FD;
  --op-exodus-20: #E3E0FA;        /* light purple fill */
  --op-exodus-30: #D3CEF8;
  --op-exodus-40: #BFB8F5;
  --op-exodus-50: #ABA2F1;
  --op-exodus-60: #7869E9;
  --op-exodus-70: #6C5CE7;        /* MAIN brand purple */
  --op-exodus-80: #6C5CE7;
  --op-exodus-90: #321ECC;

  /* ----- Gold (secondary: warm for The Vault / premium) ----- */
  --op-gold-5:  #FBF0E0;
  --op-gold-10: #FBF0E0;
  --op-gold-20: #F6E2C0;
  --op-gold-30: #F2D3A1;
  --op-gold-40: #EDC482;
  --op-gold-50: #E9B663;          /* MAIN gold */
  --op-gold-60: #E19A28;
  --op-gold-70: #AE7519;
  --op-gold-80: #744E10;
  --op-gold-90: #3A2708;

  /* ----- Red (destructive / errors / Vault alt accent) ----- */
  --op-red-5:  #FDEEED;
  --op-red-10: #FADAD6;
  --op-red-20: #F6B9B2;
  --op-red-30: #F09389;
  --op-red-40: #EC7265;
  --op-red-50: #E74C3C;           /* MAIN red */
  --op-red-60: #D12C1A;
  --op-red-70: #9A2113;
  --op-red-80: #68160D;

  /* ----- Green (success, Check/Call action) ----- */
  --op-green-5:  #E6FAEE;
  --op-green-10: #D0F6E0;
  --op-green-20: #95EABA;
  --op-green-30: #4DDB8A;
  --op-green-40: #27BF69;
  --op-green-50: #1F9953;         /* MAIN green (success) */
  --op-green-60: #1C8C4D;
  --op-green-70: #187741;
  --op-green-80: #146235;

  /* ----- Orange (warning / Raise) ----- */
  --op-orange-5:  #FFF9F0;
  --op-orange-10: #FFF1DB;
  --op-orange-20: #FFE0AD;
  --op-orange-30: #FFCE80;
  --op-orange-40: #FFB947;
  --op-orange-50: #FF9D04;        /* MAIN orange (Raise 1) */
  --op-orange-60: #E68E00;
  --op-orange-70: #C77B00;
  --op-orange-80: #A86800;

  /* ----- Avatar pastel set (user identity colors) ----- */
  --op-av-green:       #00DCC2;
  --op-av-light-blue:  #50B5FF;
  --op-av-violet-blue: #9593FF;
  --op-av-purple:      #CE7DFF;
  --op-av-pink:        #FF53BA;
  --op-av-red:         #FF5372;
  --op-av-orange:      #FF862F;
  --op-av-citrine:     #D4CC00;

  /* ----- Action Colors (poker bet tiers) ----- */
  --op-action-fold:         #C3D3E9;
  --op-action-fold-hover:   #A5BFE2;
  --op-action-check:        #36C591;
  --op-action-check-hover:  #28A679;
  --op-action-starting-bet: #BCC0C8;

  --op-bet-1:       #C4E538;   /* lime */
  --op-bet-1-hover: #B0CF2D;
  --op-bet-2:       #FFDC35;   /* yellow */
  --op-bet-2-hover: #F0C700;

  --op-raise-1:       #FF9D04; /* orange */
  --op-raise-1-hover: #E78D00;
  --op-raise-2:       #E86427; /* darker orange */
  --op-raise-2-hover: #BE4B19;
  --op-raise-3:       #A31B10; /* maroon */
  --op-raise-3-hover: #841107;
  --op-raise-4:       #D50066; /* magenta */
  --op-raise-4-hover: #B80159;
  --op-raise-5:       #8D3095; /* violet */
  --op-raise-5-hover: #7C2184;

  --op-all-in:        #FB81CA; /* pink (all-in distinct) */
  --op-all-in-hover:  #EF41A9;
  --op-reserved:      #437EB4; /* reserved action */

  /* ----- Semantic ----- */
  --op-fg:          #2E3238;   /* primary text (neutral-90 equiv) */
  --op-fg-strong:   #25282D;   /* brand black, headings */
  --op-fg-muted:    #535A66;   /* secondary text */
  --op-fg-soft:     #7B8493;   /* tertiary labels */
  --op-fg-disabled: #B6BBC4;

  --op-fg-brand:   #6C5CE7;
  --op-fg-link:    #6C5CE7;

  --op-bg:          #FFFFFF;
  --op-bg-subtle:   #F8F9FC;   /* page background tint */
  --op-bg-muted:    #EEEFF1;
  --op-bg-brand-soft: #EDEBFC; /* light purple fill used for pills/cards */
  --op-bg-gold-soft:  #FBF0E0;

  --op-border:        #DDE0E4;
  --op-border-strong: #CACDD4;
  --op-border-brand:  #BFB8F5;
  --op-border-gold:   #E9B663;

  --op-success: #1F9953;
  --op-warning: #FF9D04;
  --op-danger:  #E74C3C;
  --op-info:    #6C5CE7;

  /* ----- Elevation (shadow system) ----- */
  --op-shadow-xs: 0 1px 2px rgba(114,129,167,0.04);
  --op-shadow-sm: 0 2px 4px rgba(114,129,167,0.08), 0 1px 2px rgba(114,129,167,0.04);
  --op-shadow-md: 0 4px 12px rgba(114,129,167,0.10), 0 2px 4px rgba(114,129,167,0.06);
  --op-shadow-lg: 0 12px 32px rgba(114,129,167,0.14), 0 4px 8px rgba(114,129,167,0.06);
  --op-shadow-dialog: 0 24px 64px rgba(0,0,0,0.15);
  --op-shadow-gold-glow: 0 0 0 3px rgba(233,182,99,0.30);
  --op-shadow-focus:    0 0 0 3px rgba(108,92,231,0.25);

  /* ----- Radius ----- */
  --op-radius-xs: 4px;
  --op-radius-sm: 6px;
  --op-radius-md: 8px;   /* default button / input radius */
  --op-radius-lg: 12px;
  --op-radius-xl: 16px;
  --op-radius-2xl: 24px;
  --op-radius-pill: 9999px;

  /* ----- Spacing (4px grid) ----- */
  --op-space-1: 4px;
  --op-space-2: 8px;
  --op-space-3: 12px;
  --op-space-4: 16px;
  --op-space-5: 20px;
  --op-space-6: 24px;
  --op-space-8: 32px;
  --op-space-10: 40px;
  --op-space-12: 48px;
  --op-space-16: 64px;
  --op-space-20: 80px;

  /* ----- Type stack ----- */
  --op-font-display: 'Poppins', 'Inter Tight', system-ui, sans-serif;
  --op-font-body:    'Inter', system-ui, sans-serif;
  --op-font-ui:      'Inter', system-ui, sans-serif;
  --op-font-dialog:  'Kalam', 'Caveat', cursive;     /* "George" AI voice */
  --op-font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- Semantic type roles ---------- */
.op-display-xl { font-family: var(--op-font-display); font-weight: 700; font-size: 72px; line-height: 1.05; letter-spacing: -0.02em; color: var(--op-fg-strong); }
.op-display-lg { font-family: var(--op-font-display); font-weight: 700; font-size: 56px; line-height: 1.08; letter-spacing: -0.01em; color: var(--op-fg-strong); }
.op-display    { font-family: var(--op-font-display); font-weight: 700; font-size: 48px; line-height: 1.1;  letter-spacing: -0.01em; color: var(--op-fg-strong); }

.op-h1 { font-family: var(--op-font-display); font-weight: 700; font-size: 32px; line-height: 40px; color: var(--op-fg-strong); }
.op-h2 { font-family: var(--op-font-display); font-weight: 700; font-size: 28px; line-height: 36px; color: var(--op-fg-strong); }
.op-h3 { font-family: var(--op-font-display); font-weight: 600; font-size: 22px; line-height: 30px; color: var(--op-fg-strong); }
.op-h4 { font-family: var(--op-font-body);    font-weight: 600; font-size: 18px; line-height: 26px; color: var(--op-fg-strong); }
.op-h5 { font-family: var(--op-font-body);    font-weight: 600; font-size: 16px; line-height: 22px; color: var(--op-fg-strong); }
.op-h6 { font-family: var(--op-font-body);    font-weight: 700; font-size: 16px; line-height: 24px; color: var(--op-fg-strong); }

.op-body-lg    { font-family: var(--op-font-body); font-weight: 400; font-size: 16px; line-height: 22px; color: var(--op-fg); }
.op-body       { font-family: var(--op-font-body); font-weight: 400; font-size: 14px; line-height: 18px; color: var(--op-fg); }
.op-body-sm    { font-family: var(--op-font-body); font-weight: 400; font-size: 13px; line-height: 18px; color: var(--op-fg); }

.op-label      { font-family: var(--op-font-body); font-weight: 600; font-size: 14px; line-height: 18px; color: var(--op-fg-strong); letter-spacing: 0.01em; }
.op-label-sm   { font-family: var(--op-font-body); font-weight: 600; font-size: 12px; line-height: 16px; color: var(--op-fg-strong); letter-spacing: 0.02em; }
.op-eyebrow    { font-family: var(--op-font-body); font-weight: 700; font-size: 11px; line-height: 16px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--op-fg-muted); }

.op-cta        { font-family: var(--op-font-body); font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: 0.01em; }
.op-cta-lg     { font-family: var(--op-font-body); font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: 0.01em; }

.op-caption    { font-family: var(--op-font-body); font-weight: 400; font-size: 12px; line-height: 16px; color: var(--op-fg-soft); }

.op-dialog     { font-family: var(--op-font-dialog); font-weight: 400; font-size: 22px; line-height: 1.3;  color: var(--op-fg-strong); }
.op-dialog-sm  { font-family: var(--op-font-dialog); font-weight: 400; font-size: 16px; line-height: 1.35; color: var(--op-fg-strong); }

.op-mono       { font-family: var(--op-font-mono); font-weight: 500; font-size: 13px; line-height: 20px; color: var(--op-fg); }