/* ============================================================================
   AksesKerja Design System — Elevation (Shadows, Radii, Borders)
   Soft, low-opacity ambient shadows + deliberate rounded corners
   ============================================================================ */

:root {
  /* ---- Border Radius ------------------------------------------------------ */
  /* ONE button shape across every surface (app AND landing): all buttons use
     --radius-btn (10px). Pills are for non-buttons only — chips, badges,
     avatars, search, status, toggle switches, circular icon buttons. */
  --radius-sm:   4px;       /* minimal rounding */
  --radius:      8px;       /* inputs & small cards */
  --radius-btn:  10px;      /* ALL buttons + segmented toggles (segments use --radius inner) */
  --radius-md:   12px;      /* moderate rounding */
  --radius-card: 16px;      /* standard card rounding (candidate, widget cards) */
  --radius-lg:   24px;      /* large panels, feature containers, checkout shell */
  --radius-pill: 9999px;    /* fully rounded — chips, badges, avatars, search, status, toggle switches, circular icon buttons (NOT buttons) */

  /* ---- Elevation (Shadows) ------------------------------------------------- */
  /* Soft, low-opacity ambient shadows. Shadows prefer borders + subtle depth
     over aggressive drop shadows. The blue CTA glow is the only colored shadow. */
  
  --shadow-sm:  0 1px 2px 0 rgba(15, 23, 42, 0.05);
  
  --shadow-md:  0 4px 12px -2px rgba(15, 23, 42, 0.08);
  
  --shadow-lg:  0 10px 25px -5px rgba(15, 23, 42, 0.10),
                0 8px 10px -6px rgba(15, 23, 42, 0.10);
  
  /* Blue glow under primary CTAs and emphasized floating elements */
  --shadow-cta: 0 10px 20px -6px rgba(37, 99, 235, 0.30);

  /* ---- Borders ------------------------------------------------------------- */
  /* Border COLORS live in colors.css (--border, --border-soft). Use them as
     `1px solid var(--border)`. Do not redefine them here. */
}

/* ============================================================================
   Border Defaults
   Used throughout for card dividers, input borders, etc.
   ============================================================================ */

/* If using border utilities, a sensible default is 1px solid var(--border) */