/* ===========================================================================
   PhotoGalaxy · theme tokens
   ---------------------------------------------------------------------------
   The single source of truth for all colors, radii, shadows, and motion.
   To restyle the entire application, change the values here.
   No other stylesheet should hard-code a color literal — always reference
   one of these custom properties.
   =========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     SURFACES — soft off-white, never pure #fff
     ----------------------------------------------------------------------- */
  --bg:              #fbfaf8;   /* page background, barely-warm near-white */
  --surface:         #ffffff;   /* cards, panels, dialogs */
  --surface-alt:     #f5f3ef;   /* recessed surfaces, hover backgrounds */
  --surface-sunken:  #ecebe6;   /* sunken regions, inactive areas */
  --surface-sidebar: #c4c4c4;   /* dashboard sidebar — mid-grey rail */

  /* -----------------------------------------------------------------------
     TEXT — dark grey, never pure black
     ----------------------------------------------------------------------- */
  --text:            #2c2b2e;   /* primary text */
  --text-secondary:  #6b6a6f;   /* labels, captions, supporting copy */
  --text-muted:      #9a989d;   /* timestamps, hints, disabled state */
  --text-on-accent:  #fafaf8;   /* text on dark grey accent backgrounds */

  /* -----------------------------------------------------------------------
     LINES — soft borders + dividers
     ----------------------------------------------------------------------- */
  --line:            #e6e3dc;   /* default border */
  --line-soft:       #ededeb;   /* faint divider inside surfaces */
  --line-strong:     #d6d2c9;   /* emphasized border on focus / selected */

  /* -----------------------------------------------------------------------
     ACCENT — visible dark grey, never #000
     ----------------------------------------------------------------------- */
  --accent:          #38373a;   /* primary buttons, active nav, highlights */
  --accent-hover:    #4a4a4d;   /* button hover state */
  --accent-soft:     #ededeb;   /* tinted background for selected items */

  /* -----------------------------------------------------------------------
     STATUS
     ----------------------------------------------------------------------- */
  --danger:          #b35454;
  --danger-soft:     #f5e6e6;

  /* -----------------------------------------------------------------------
     SHAPE
     ----------------------------------------------------------------------- */
  --radius-xs:       4px;
  --radius-sm:       8px;
  --radius:          12px;
  --radius-lg:       18px;
  --radius-pill:     999px;

  /* -----------------------------------------------------------------------
     ELEVATION — extremely subtle; depth comes from spacing, not shadow
     ----------------------------------------------------------------------- */
  --shadow-xs:       0 1px 2px rgba(44, 43, 46, 0.04);
  --shadow-sm:       0 2px 6px rgba(44, 43, 46, 0.05), 0 1px 2px rgba(44, 43, 46, 0.04);
  --shadow:          0 8px 24px -10px rgba(44, 43, 46, 0.10), 0 2px 4px rgba(44, 43, 46, 0.04);
  --shadow-lg:       0 24px 60px -20px rgba(44, 43, 46, 0.18);
  --ring-focus:      0 0 0 3px rgba(56, 55, 58, 0.12);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------------------- */
  --font-display:    "Fraunces", ui-serif, Georgia, serif;
  --font-ui:         "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* -----------------------------------------------------------------------
     MOTION
     ----------------------------------------------------------------------- */
  --ease:            cubic-bezier(.2, .7, .2, 1);
  --dur-fast:        140ms;
  --dur:             220ms;
  --dur-slow:        420ms;
}

/* Reset + global baseline */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--accent); }

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

::selection { background: var(--accent-soft); color: var(--text); }