/* ==========================================================================
   Reefhouse — design tokens
   app-83 · poker-room rebrand · Aura → Lucy handoff

   World: a cyber city under the ocean. Deep navy depths + bioluminescent
   cyan/teal signage. This is a HOME GAME, not a casino floor — keep contrast
   high and glow purposeful (state/feedback), never decorative neon-wash.

   Usage: link this file first, on every page, before any page-level CSS.
   All Reefhouse components are built ONLY from these variables — if a
   screen needs a color/space/radius that isn't here, add the token instead
   of hardcoding a value inline.
   ========================================================================== */

:root {

  /* ---- Surfaces (deep navy, layered by elevation) --------------------
     -void   : page background, the deepest water
     -surface: default card/panel
     -raised : modals, popovers, the avatar-picker preview panel
     -overlay: hover/pressed state fill, input backgrounds
  ------------------------------------------------------------------------ */
  --rh-bg-void:            #050b14;
  --rh-bg-deep:             #081120; /* secondary page bg, e.g. table felt-well */
  --rh-bg-surface:          #0a1626;
  --rh-bg-surface-raised:   #101f33;
  --rh-bg-surface-overlay:  #16283f;

  /* ---- Accent (cyan/electric teal — the bioluminescent signal color) --
     -cyan     : primary actions, focus rings, active/turn glow
     -teal     : secondary accent, success-adjacent, host badge
     -cyan-dim : borders/backgrounds that need a whisper of accent
  ------------------------------------------------------------------------ */
  --rh-accent-cyan:      #2de2e6;
  --rh-accent-cyan-hi:   #7bf5f8; /* hover/lighten of primary accent */
  --rh-accent-teal:      #17c3b2;
  --rh-accent-cyan-dim:  #123844;

  /* ---- Text ------------------------------------------------------------
     -primary  : headings, high-emphasis body
     -secondary: default body/labels
     -muted    : captions, disabled, timestamps
     -on-accent: text placed on top of a filled accent surface (buttons)
  ------------------------------------------------------------------------ */
  --rh-text-primary:    #eaf6f8;
  --rh-text-secondary:  #9fb8c8;
  --rh-text-muted:      #5d7a8c;
  --rh-text-on-accent:  #04141a;

  /* ---- Borders ----------------------------------------------------------
     -subtle : default card/input borders
     -strong : hover/focus, dividers that need to read clearly
  ------------------------------------------------------------------------ */
  --rh-border-subtle:  #1c3348;
  --rh-border-strong:  #2a4a63;

  /* ---- Feedback ----------------------------------------------------------
     -danger : fold / destructive / errors — coral, not casino red
     -success: confirmations, positive deltas
     -warning: turn timer running low, host caution states
  ------------------------------------------------------------------------ */
  --rh-danger:        #ff5470;
  --rh-danger-dim:     #3a1420;
  --rh-success:       #2de2a6;
  --rh-warning:       #ffb84d;

  /* ---- Type ---------------------------------------------------------- */
  --rh-font-display: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif; /* logo lockup, H1/H2, table stakes readouts — geometric/techy */
  --rh-font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; /* body copy, labels, inputs, buttons */

  --rh-text-xs:    0.75rem;   /* 12px — captions, badges, timestamps */
  --rh-text-sm:    0.875rem;  /* 14px — secondary labels, helper text */
  --rh-text-base:  1rem;      /* 16px — body copy, inputs */
  --rh-text-md:    1.125rem;  /* 18px — card titles, nav links */
  --rh-text-lg:    1.5rem;    /* 24px — section headers */
  --rh-text-xl:    2rem;      /* 32px — screen titles */
  --rh-text-2xl:   2.75rem;   /* 44px — landing hero headline (mobile) */
  --rh-text-3xl:   3.75rem;   /* 60px — landing hero headline (desktop) */

  --rh-leading-tight:  1.15;
  --rh-leading-normal: 1.5;

  --rh-weight-regular: 400;
  --rh-weight-medium:  500;
  --rh-weight-semibold:600;
  --rh-weight-bold:    700;

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

  /* ---- Radius ------------------------------------------------------------
     -sm  : inputs, small badges, icon slots
     -md  : buttons, avatar tiles
     -lg  : cards/panels
     -xl  : hero panels, table surface corners
     -pill: segmented controls, chips, pill buttons
  ------------------------------------------------------------------------ */
  --rh-radius-sm:   6px;
  --rh-radius-md:   10px;
  --rh-radius-lg:   16px;
  --rh-radius-xl:   24px;
  --rh-radius-pill: 999px;

  /* ---- Shadow / glow ------------------------------------------------------
     Glows are signal, not decoration: use -glow-cyan for the active/your-turn
     state and focus rings, -glow-danger for fold/urgent, never on idle UI.
  ------------------------------------------------------------------------ */
  --rh-shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.4);
  --rh-shadow-md:        0 4px 16px rgba(0, 0, 0, 0.45);
  --rh-shadow-lg:        0 12px 32px rgba(0, 0, 0, 0.55);
  --rh-shadow-glow-cyan: 0 0 0 3px rgba(45, 226, 230, 0.18), 0 0 24px rgba(45, 226, 230, 0.35);
  --rh-shadow-glow-danger: 0 0 0 3px rgba(255, 84, 112, 0.18), 0 0 24px rgba(255, 84, 112, 0.3);

  /* ---- Motion (for interactive states — keep restrained, not slot-machine) */
  --rh-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --rh-duration-fast: 120ms;
  --rh-duration-base: 200ms;
}