/* ==========================================================================
   DESIGN SYSTEM — Calculator App
   Soft, light neumorphic style. Rounded pill buttons, warm orange accents.
   Every component/page CSS file should build on these tokens only —
   no new hard-coded colors, radii, or shadows outside this file.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');

:root {
  /* ---- Color: base surfaces ---- */
  --color-bg: #efeef0;              /* page background */
  --color-bg-glow-orange: #ff9500;  /* ambient glow bleeding from card corner */
  --color-card: #fbfbfc;            /* main calculator card surface */
  --color-card-edge: #ffffff;       /* highlight edge on card */

  /* ---- Color: buttons ---- */
  --color-btn-function: #e4e3e6;    /* ≡  +/-  %  */
  --color-btn-function-text: #3c3c3e;

  --color-btn-number: #f6f6f7;      /* 0–9 . */
  --color-btn-number-text: #2c2c2e;

  --color-btn-operator: #ff9f0a;    /* ÷ × − + = */
  --color-btn-operator-light: #ffb340;
  --color-btn-operator-text: #ffffff;

  --color-btn-operator-active: #ffcc80; /* pressed/selected operator state */

  /* ---- Color: text ---- */
  --color-text-primary: #2c2c2e;    /* current result */
  --color-text-secondary: #b3b3b8;  /* running expression / history line */
  --color-text-muted: #8e8e93;

  /* ---- Shadows: neumorphic soft-raised effect ---- */
  --shadow-card:
    12px 12px 32px rgba(0, 0, 0, 0.06),
    -10px -10px 28px rgba(255, 255, 255, 0.9);

  --shadow-btn-raised:
    5px 5px 10px rgba(0, 0, 0, 0.06),
    -4px -4px 10px rgba(255, 255, 255, 0.85);

  --shadow-btn-pressed:
    inset 3px 3px 6px rgba(0, 0, 0, 0.08),
    inset -3px -3px 6px rgba(255, 255, 255, 0.7);

  --shadow-btn-operator:
    5px 5px 14px rgba(255, 149, 10, 0.35),
    -2px -2px 8px rgba(255, 255, 255, 0.4);

  /* ---- Soft floating shadow: blurred, all around the button ---- */
  --shadow-btn-soft:
    0 10px 20px rgba(0, 0, 0, 0.10),
    0 3px 6px rgba(0, 0, 0, 0.08);

  --shadow-btn-soft-active:
    0 4px 8px rgba(0, 0, 0, 0.10),
    0 1px 3px rgba(0, 0, 0, 0.08);

  --shadow-btn-soft-operator:
    0 10px 22px rgba(255, 149, 10, 0.40),
    0 3px 8px rgba(255, 149, 10, 0.25);

  --shadow-btn-soft-operator-active:
    0 4px 10px rgba(255, 149, 10, 0.35),
    0 1px 4px rgba(255, 149, 10, 0.2);

  --shadow-glow-ambient: 0 0 120px 40px rgba(255, 149, 10, 0.18);

  /* ---- Radius ---- */
  --radius-card: 40px;
  --radius-btn: 28px;
  --radius-btn-wide: 34px;   /* the "0" double-width key */
  --radius-pill: 999px;
  --radius-sm: 14px;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* ---- Typography ---- */
  --font-display: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI Rounded', sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-result: clamp(2.6rem, 6vw, 4.2rem);   /* big current number */
  --fs-expression: 1.4rem;                    /* small running calc line */
  --fs-btn: 1.6rem;                           /* digit/operator label */
  --fs-btn-fn: 1.2rem;                        /* ≡ +/- % labels */
  --fs-nav: 0.95rem;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---- Motion ---- */
  --ease-press: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.12s;
  --duration-normal: 0.22s;
}

/* ---- Dark theme: same tokens, dark neumorphic surfaces ----
   Applied via body[data-theme="dark"] (set by js/theme.js) so it
   cascades to every component/page on every screen automatically. */
body[data-theme="dark"] {
  /* ---- Color: base surfaces ---- */
  --color-bg: #18181a;
  --color-bg-glow-orange: #ff9500;
  --color-card: #222224;
  --color-card-edge: #2c2c2f;

  /* ---- Color: buttons ---- */
  --color-btn-function: #2c2c2e;
  --color-btn-function-text: #e5e5ea;

  --color-btn-number: #232326;
  --color-btn-number-text: #f2f2f7;

  --color-btn-operator: #ff9f0a;
  --color-btn-operator-light: #ffb340;
  --color-btn-operator-text: #1c1c1e;

  --color-btn-operator-active: #cc7f00;

  /* ---- Color: text ---- */
  --color-text-primary: #f2f2f7;
  --color-text-secondary: #86868b;
  --color-text-muted: #636366;

  /* ---- Shadows: dark neumorphic (deep shadow + faint highlight) ---- */
  --shadow-card:
    12px 12px 32px rgba(0, 0, 0, 0.55),
    -10px -10px 28px rgba(255, 255, 255, 0.03);

  --shadow-btn-raised:
    5px 5px 10px rgba(0, 0, 0, 0.5),
    -4px -4px 10px rgba(255, 255, 255, 0.025);

  --shadow-btn-pressed:
    inset 3px 3px 6px rgba(0, 0, 0, 0.6),
    inset -3px -3px 6px rgba(255, 255, 255, 0.02);

  --shadow-btn-operator:
    5px 5px 14px rgba(255, 149, 10, 0.25),
    -2px -2px 8px rgba(255, 255, 255, 0.02);

  --shadow-btn-soft:
    0 10px 20px rgba(0, 0, 0, 0.4),
    0 3px 6px rgba(0, 0, 0, 0.3);

  --shadow-btn-soft-active:
    0 4px 8px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.3);

  --shadow-btn-soft-operator:
    0 10px 22px rgba(255, 149, 10, 0.35),
    0 3px 8px rgba(255, 149, 10, 0.2);

  --shadow-btn-soft-operator-active:
    0 4px 10px rgba(255, 149, 10, 0.3),
    0 1px 4px rgba(255, 149, 10, 0.18);

  --shadow-glow-ambient: 0 0 120px 40px rgba(255, 149, 10, 0.12);
}

/* ---- Global reset & base ---- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--duration-normal) ease,
              color var(--duration-normal) ease;
}

button {
  font-family: inherit;
  border: none;
  cursor: pointer;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  display: block;
  max-width: 100%;
}