/* ============================================
   Gold & Silver Prices - Design Tokens
   Extracted from index.html for consistent reuse
   ============================================ */

/* --- Import Note ---
   Requires Bricolage Grotesque font (300,400,500 weights):
   <link href="https://fonts.bunny.net/css?family=bricolage-grotesque:300,400,500" rel="stylesheet">
   --- */

:root {
  /* --- Colors --- */
  --color-bg: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  --color-fg: #1a1a1a;
  --color-muted: #999;
  --color-accent: #002FA7;
  --color-border: #ebebeb;
  --color-success: #22c55e;
  --color-error: #ef4444;
  --color-error-bg: #fee;
  --color-session-badge-bg: #f0f0f0;
  --color-card-shadow: rgba(0, 0, 0, 0.06);
  --color-card-shadow-hover: rgba(0, 0, 0, 0.1);
  --color-card-label: #666;

  /* --- Typography --- */
  --font-sans: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* --- Spacing & Layout --- */
  --layout-max-width: 560px;
  --spacing-body-padding: 2rem 1.25rem;
  --spacing-card-padding: 14px 16px;
  --spacing-grid-gap: 10px;
  --spacing-divider-margin: 0.75rem 0 1.5rem;
  --spacing-updated-margin-bottom: 1.5rem;
  --spacing-footer-padding-top: 1rem;
  --spacing-session-badge-margin-left: 6px;
  --spacing-card-info-gap: 8px;
  --spacing-change-margin-left: 8px;

  /* --- Borders & Radius --- */
  --radius-card: 10px;
  --radius-session-badge: 999px;
  --radius-error: 6px;
  --border-card: 1px solid var(--color-border);
  --border-left-up: 3px solid var(--color-success);
  --border-left-down: 3px solid var(--color-error);

  /* --- Shadows --- */
  --shadow-card: 0 2px 8px var(--color-card-shadow);
  --shadow-card-hover: 0 4px 12px var(--color-card-shadow-hover);

  /* --- Transitions --- */
  --transition-card: transform 0.2s ease, box-shadow 0.2s ease;

  /* --- Icon Sizing --- */
  --icon-metal-size: 20px;

   /* --- Z-Index (if needed) --- */
   /* Currently no z-index usage */

   /* --- Typography Scale --- */
   --text-heading-size: 1.25rem;
   --text-heading-weight: var(--font-weight-medium);

   --text-updated-size: 0.75rem;
   --text-updated-letter-spacing: 0.3px;
   --text-updated-transform: uppercase;

   --text-card-label-size: 0.85rem;
   --text-card-label-color: var(--color-card-label);

   --text-card-purity-size: 0.7rem;
   --text-card-purity-color: var(--color-muted);

   --text-card-price-size: 1.05rem;
   --text-card-price-weight: var(--font-weight-medium);

   --text-card-change-size: 0.7rem;

   --text-session-badge-size: 0.7rem;
   --text-session-badge-weight: var(--font-weight-medium);
   --text-session-badge-padding: 2px 8px;

   --text-footer-size: 0.75rem;

   --text-error-size: 0.85rem;
}