/* ============================================================
   DESIGN TOKENS — Toycore Management System
   Source: DESIGN.md
   ============================================================ */

:root {
  /* ── Brand accent ──────────────────────────────────────── */
  --color-toy-bg:        #E6DDD8;
  --color-toy-base:      #F6F4F2;
  --color-toy-purple:    #9269A4;
  --color-toy-lime:      #D3DC6C;

  /* ── Surface scale ─────────────────────────────────────── */
  --color-surface:                 #fff8f2;
  --color-surface-dim:             #e0d9d1;
  --color-surface-bright:          #fff8f2;
  --color-surface-container-low:   #faf2ea;
  --color-surface-container:       #f4ede4;
  --color-surface-container-high:  #efe7de;
  --color-surface-container-highest: #e9e1d9;
  --color-surface-variant:         #e9e1d9;

  /* ── Content ────────────────────────────────────────────── */
  --color-on-surface:         #1e1b16;
  --color-on-surface-variant: #4c444e;
  --color-outline:            #7d747e;
  --color-outline-variant:    #cfc3ce;

  /* ── Primary (purple) ───────────────────────────────────── */
  --color-primary:            #744d85;
  --color-on-primary:         #ffffff;
  --color-primary-container:  #8e65a0;
  --color-on-primary-container: #fffbff;
  --color-primary-fixed:      #f6d9ff;
  --color-primary-fixed-dim:  #e4b6f7;
  --color-inverse-primary:    #e4b6f7;

  /* ── Secondary (lime/green) ─────────────────────────────── */
  --color-secondary:           #5c6300;
  --color-on-secondary:        #ffffff;
  --color-secondary-container: #e1ea78;
  --color-on-secondary-container: #626900;
  --color-secondary-fixed:     #e1ea78;
  --color-secondary-fixed-dim: #c5ce60;

  /* ── Tertiary ───────────────────────────────────────────── */
  --color-tertiary:           #675571;
  --color-on-tertiary:        #ffffff;
  --color-tertiary-container: #816e8b;
  --color-on-tertiary-container: #fffbff;

  /* ── Error ──────────────────────────────────────────────── */
  --color-error:           #ba1a1a;
  --color-on-error:        #ffffff;
  --color-error-container: #ffdad6;

  /* ── Background / inverse ───────────────────────────────── */
  --color-background:       #fff8f2;
  --color-on-background:    #1e1b16;
  --color-inverse-surface:  #33302a;
  --color-inverse-on-surface: #f7efe7;

  /* ══════════════════════════════════════════════════════════
     SPACING  (8px base unit)
  ══════════════════════════════════════════════════════════ */
  --space-xs:  4px;
  --space-sm:  12px;
  --space-base: 8px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-container: 32px;
  --space-gutter:    24px;

  /* ══════════════════════════════════════════════════════════
     BORDER RADIUS
  ══════════════════════════════════════════════════════════ */
  --radius-sm:   4px;
  --radius-base: 8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;   /* cards */
  --radius-full: 9999px; /* pills */

  /* ══════════════════════════════════════════════════════════
     SHADOWS
  ══════════════════════════════════════════════════════════ */
  --shadow-card:       0 10px 40px -10px rgba(31, 28, 23, 0.08);
  --shadow-card-hover: 0 20px 50px -12px rgba(31, 28, 23, 0.15);
  --shadow-topbar:     0 1px 0 0 var(--color-surface-container-high);

  /* ══════════════════════════════════════════════════════════
     TYPOGRAPHY
  ══════════════════════════════════════════════════════════ */
  --font-family: 'Manrope', system-ui, sans-serif;

  --text-display-lg-size:   48px;
  --text-display-lg-weight: 800;
  --text-display-lg-lh:     1.1;
  --text-display-lg-ls:     -0.02em;

  --text-headline-lg-size:   32px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-lh:     1.2;
  --text-headline-lg-ls:     -0.01em;

  --text-headline-md-size:   24px;
  --text-headline-md-weight: 700;
  --text-headline-md-lh:     1.3;

  --text-headline-sm-size:   20px;
  --text-headline-sm-weight: 600;
  --text-headline-sm-lh:     1.4;

  --text-body-lg-size:   18px;
  --text-body-lg-weight: 400;
  --text-body-lg-lh:     1.6;

  --text-body-md-size:   16px;
  --text-body-md-weight: 400;
  --text-body-md-lh:     1.6;

  --text-body-sm-size:   14px;
  --text-body-sm-weight: 400;
  --text-body-sm-lh:     1.5;

  --text-label-md-size:   14px;
  --text-label-md-weight: 600;
  --text-label-md-lh:     1;
  --text-label-md-ls:     0.05em;

  --text-label-sm-size:   12px;
  --text-label-sm-weight: 500;
  --text-label-sm-lh:     1;

  /* ══════════════════════════════════════════════════════════
     LAYOUT
  ══════════════════════════════════════════════════════════ */
  --sidebar-width: 280px;
  --topbar-height: 80px;

  /* ══════════════════════════════════════════════════════════
     TRANSITIONS
  ══════════════════════════════════════════════════════════ */
  --transition-fast:   120ms ease-out;
  --transition-base:   200ms ease-out;
  --transition-slow:   350ms ease-in-out;
}