/* ============================================================
   Design Tokens -- Professional Calculator
   ============================================================ */

:root {
  /* --- Background & Surfaces --- */
  --color-bg:                  #f0f1f5;
  --color-surface:             linear-gradient(175deg, #e4e6ec 0%, #dbdde4 100%);
  --color-surface-solid:       #ffffff;
  --color-display:             #c5cfb4;

  /* --- Primary (Blue) --- */
  --color-primary:             #3381f5;
  --color-primary-light:       #2a6ad0;
  --color-primary-dark:        #1d5fd0;

  /* --- Neutral Scale --- */
  --color-neutral-100:         #f8f9fb;
  --color-neutral-200:         #f0f1f5;
  --color-neutral-300:         #e2e4ea;
  --color-neutral-400:         #9ba2b0;
  --color-neutral-500:         #6b7280;
  --color-neutral-600:         #4a5060;
  --color-neutral-700:         #363c4a;
  --color-neutral-800:         #252a35;
  --color-neutral-900:         #14171f;

  /* --- Accent (Amber for operators) --- */
  --color-accent:              #f5a623;
  --color-accent-light:        #f7b84a;
  --color-accent-dark:         #d98e10;

  /* --- Semantic --- */
  --color-error:               #e65a4b;
  --color-error-dark:          #cc3f30;

  /* --- Text --- */
  --color-text-primary:        #1a1f2c;
  --color-text-result:         #1a1e1a;
  --color-text-error:          #a03020;
  --color-text-muted:          #4a5a48;

  /* --- Button Backgrounds --- */
  --color-btn-number:          #ffffff;
  --color-btn-operator:        #f5a623;
  --color-btn-function:        #cdd1db;
  --color-btn-equals:          linear-gradient(135deg, #3381f5, #2060d0);
  --color-btn-equals-flat:     #3381f5;
  --color-btn-clear:           #e65a4b;

  /* --- Interactive States --- */
  --color-hover:               rgba(0, 0, 0, 0.035);
  --color-active:              rgba(0, 0, 0, 0.07);
  --color-focus-ring:          #5a9df7;

  /* --- Borders --- */
  --glass-border:              1px solid rgba(0, 0, 0, 0.05);
  --glass-border-light:        1px solid rgba(0, 0, 0, 0.04);

  /* --- Typography --- */
  --font-family-sans:          'Inter', 'SF Pro Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family-mono:          'JetBrains Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

  --font-size-xs:              0.75rem;
  --font-size-sm:              0.8125rem;
  --font-size-base:            1rem;
  --font-size-lg:              1.25rem;
  --font-size-xl:              1.5rem;

  --font-weight-normal:        400;
  --font-weight-medium:        500;
  --font-weight-semibold:      600;
  --font-weight-bold:          700;

  --line-height-tight:         1.2;
  --line-height-normal:        1.5;

  /* --- Spacing --- */
  --space-1:                   0.25rem;
  --space-2:                   0.5rem;
  --space-3:                   0.75rem;
  --space-4:                   1rem;
  --space-5:                   1.25rem;
  --space-6:                   1.5rem;
  --space-8:                   2rem;

  /* --- Border Radii --- */
  --radius-sm:                 6px;
  --radius-md:                 8px;
  --radius-lg:                 10px;
  --radius-xl:                 16px;
  --radius-2xl:                22px;
  --radius-full:               9999px;

  /* --- Shadows --- */
  --shadow-calc:               0 10px 40px rgba(0, 0, 0, 0.10),
                               0 2px 10px rgba(0, 0, 0, 0.04);
  --shadow-btn:                0 1px 3px rgba(0, 0, 0, 0.08),
                               0 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-btn-hover:          0 3px 8px rgba(0, 0, 0, 0.10),
                               0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-display:            inset 0 1px 3px rgba(0, 0, 0, 0.15);

  /* --- Transitions --- */
  --transition-fast:           100ms ease;
  --transition-normal:         200ms ease;

  /* --- Layout --- */
  --gap:                       5px;
  --padding-btn:               10px;
  --min-touch-target:          44px;
  --container-max-width:       420px;
  --calc-padding:              12px;
}