/* ================================================================
   ResiHub Design Tokens — Matches Stitch reference
   ================================================================ */

:root {
  /* ── SURFACES ──────────────────────────────────────────── */
  --surface:                  #faf8ff;
  --surface-dim:              #d0d9ff;
  --surface-bright:           #faf8ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low:    #f3f3ff;
  --surface-container:        #ebedff;
  --surface-container-high:   #e3e7ff;
  --surface-container-highest:#dbe1ff;
  --surface-variant:          #dbe1ff;

  /* ── PRIMARY (slate blue) ──────────────────────────────── */
  --primary:                  #35568e;
  --primary-container:        #4f6fa8;
  --primary-fixed:            #d7e2ff;
  --primary-fixed-dim:        #abc7ff;
  --on-primary:               #ffffff;
  --on-primary-container:     #f0f3ff;
  --on-primary-fixed:         #001b3f;
  --on-primary-fixed-variant: #23467d;
  --inverse-primary:          #abc7ff;

  /* ── SECONDARY (crimson) ──────────────────────────────── */
  --secondary:                #ba0035;
  --secondary-container:      #e21e49;
  --secondary-fixed:          #ffdada;
  --secondary-fixed-dim:      #ffb3b6;
  --on-secondary:             #ffffff;
  --on-secondary-container:   #fffbff;
  --on-secondary-fixed:       #40000c;
  --on-secondary-fixed-variant:#920028;

  /* ── TERTIARY (purple — AI accent) ─────────────────────── */
  --tertiary:                 #7d0bd5;
  --tertiary-container:       #9839ef;
  --tertiary-fixed:           #f0dbff;
  --tertiary-fixed-dim:       #ddb8ff;
  --on-tertiary:              #ffffff;
  --on-tertiary-container:    #fbefff;
  --on-tertiary-fixed:        #2c0051;
  --on-tertiary-fixed-variant:#6800b4;

  /* ── TEXT ──────────────────────────────────────────────── */
  --on-surface:               #041748;
  --on-surface-variant:       #434750;
  --on-background:            #041748;
  --inverse-surface:          #1d2e5e;
  --inverse-on-surface:       #eff0ff;

  /* ── OUTLINES / BORDERS ───────────────────────────────── */
  --outline:                  #747781;
  --outline-variant:          #c4c6d1;
  --border-subtle:            rgba(4, 23, 72, 0.06);
  --border-default:           rgba(4, 23, 72, 0.10);
  --border-strong:            rgba(4, 23, 72, 0.20);

  /* ── ERROR ─────────────────────────────────────────────── */
  --error:                    #ba1a1a;
  --error-container:          #ffdad6;
  --on-error:                 #ffffff;
  --on-error-container:       #93000a;

  /* ── SEMANTIC SHORTCUTS ───────────────────────────────── */
  --color-success:            #10b981;
  --color-warning:            #f59e0b;
  --color-info:               #4f6fa8;

  /* ── SPACING (Tailwind scale from Stitch) ─────────────── */
  --space-xs:    0.25rem;   /* 4px  */
  --space-sm:    0.5rem;    /* 8px  */
  --space-md:    1rem;      /* 16px */
  --space-lg:    1.5rem;    /* 24px */
  --space-xl:    2.5rem;    /* 40px */
  --margin:      1rem;
  --margin-md:   2rem;
  --margin-lg:   3.5rem;
  --gutter:      1.25rem;
  --gutter-md:   1.5rem;
  --gutter-lg:   2rem;

  /* ── RADIUS ────────────────────────────────────────────── */
  --radius-default: 0.25rem;   /* 4px  */
  --radius-lg:      0.5rem;    /* 8px  */
  --radius-xl:      0.75rem;   /* 12px */
  --radius-2xl:     1rem;      /* 16px */
  --radius-full:    9999px;

  /* ── SHADOWS ───────────────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.03);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl:  0 12px 32px rgba(0, 0, 0, 0.10);
  --shadow-btn: 0 4px 12px rgba(226, 30, 73, 0.18);
  --shadow-btn-lg: 0 4px 16px rgba(226, 30, 73, 0.22);

  /* ── MOTION ────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}