:root {
  color-scheme: light;

  /* Brand and surface palette */
  --ij-color-bg-canvas: #f5efe5;
  --ij-color-bg-canvas-strong: #efe5d5;
  --ij-color-bg-panel: rgba(255, 252, 246, 0.88);
  --ij-color-bg-panel-strong: #fff9f0;
  --ij-color-bg-panel-muted: #f7f2e8;
  --ij-color-bg-elevated: #ffffff;
  --ij-color-bg-overlay: rgba(31, 41, 51, 0.56);

  --ij-color-text-primary: #1f2933;
  --ij-color-text-secondary: #52606d;
  --ij-color-text-muted: #61707d;
  --ij-color-text-inverse: #fffdf8;

  --ij-color-border-soft: rgba(31, 41, 51, 0.12);
  --ij-color-border-default: rgba(31, 41, 51, 0.18);
  --ij-color-border-strong: rgba(31, 41, 51, 0.28);

  --ij-color-brand: #d97b2d;
  --ij-color-brand-strong: #b85611;
  --ij-color-brand-soft: #f5d2b4;
  --ij-color-accent: #1f7a5c;
  --ij-color-accent-soft: #d9efe6;

  --ij-color-info: #2f6fdd;
  --ij-color-info-soft: #deebff;
  --ij-color-success: #1f7a5c;
  --ij-color-success-soft: #dff3eb;
  --ij-color-warning: #b7791f;
  --ij-color-warning-soft: #f9ead1;
  --ij-color-danger: #b83232;
  --ij-color-danger-soft: #f9d8d8;
  --ij-color-neutral: #52606d;
  --ij-color-neutral-soft: #e8edf1;

  /* Typography */
  --ij-font-family-display: Georgia, "Times New Roman", serif;
  --ij-font-family-body: "Open Sans", Arial, sans-serif;
  --ij-font-family-label: ui-monospace, SFMono-Regular, Menlo, monospace;

  --ij-font-size-2xs: 0.6875rem;
  --ij-font-size-xs: 0.75rem;
  --ij-font-size-sm: 0.875rem;
  --ij-font-size-md: 1rem;
  --ij-font-size-lg: 1.125rem;
  --ij-font-size-xl: 1.375rem;
  --ij-font-size-2xl: clamp(1.75rem, 5vw, 2.5rem);
  --ij-font-size-3xl: clamp(2.2rem, 6vw, 4rem);

  --ij-line-height-tight: 1.1;
  --ij-line-height-snug: 1.25;
  --ij-line-height-body: 1.5;
  --ij-line-height-loose: 1.7;

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

  /* Spacing scale */
  --ij-space-0: 0;
  --ij-space-1: 0.25rem;
  --ij-space-2: 0.5rem;
  --ij-space-3: 0.75rem;
  --ij-space-4: 1rem;
  --ij-space-5: 1.25rem;
  --ij-space-6: 1.5rem;
  --ij-space-7: 2rem;
  --ij-space-8: 2.5rem;
  --ij-space-9: 3rem;
  --ij-space-10: 4rem;

  /* Radius */
  --ij-radius-sm: 0.5rem;
  --ij-radius-md: 0.875rem;
  --ij-radius-lg: 1.25rem;
  --ij-radius-xl: 1.5rem;
  --ij-radius-pill: 999px;

  /* Shadows */
  --ij-shadow-sm: 0 6px 18px rgba(75, 60, 42, 0.08);
  --ij-shadow-md: 0 14px 32px rgba(75, 60, 42, 0.12);
  --ij-shadow-lg: 0 24px 60px rgba(75, 60, 42, 0.12);
  --ij-shadow-focus: 0 0 0 3px rgba(217, 123, 45, 0.22);

  /* Layout */
  --ij-container-max: 1180px;
  --ij-content-max: 72rem;
  --ij-touch-target-min: 2.75rem;

  /* Breakpoints */
  --ij-breakpoint-xs: 24.375rem; /* 390px */
  --ij-breakpoint-sm: 26.875rem; /* 430px */
  --ij-breakpoint-md: 48rem;     /* 768px */
  --ij-breakpoint-lg: 64rem;     /* 1024px */
  --ij-breakpoint-xl: 80rem;     /* 1280px */

  /* Z-index system */
  --ij-z-base: 1;
  --ij-z-raised: 10;
  --ij-z-sticky: 100;
  --ij-z-dropdown: 400;
  --ij-z-overlay: 800;
  --ij-z-modal: 1000;
  --ij-z-toast: 1200;

  /* Motion */
  --ij-motion-fast: 160ms ease;
  --ij-motion-base: 220ms ease;


  /* ── IMJ Button Design System tokens (Navy · Sand · Gold) ──────
     Prefix: --imj-  (separate namespace from --ij- above)
     Source: buttons.css
     ──────────────────────────────────────────────────────────── */

  /* Brand palette */
  --imj-navy:           #1b2a45;
  --imj-navy-hover:     #243758;
  --imj-navy-press:     #12203a;
  --imj-gold:           #c9933a;
  --imj-gold-hover:     #d9a44d;
  --imj-gold-press:     #b07e2e;
  --imj-sand:           #e8e3d5;
  --imj-sand-soft:      #f4f1eb;
  --imj-sand-strong:    #ccc8bb;

  /* Semantic — danger / like */
  --imj-danger:         #8B2E2E;
  --imj-danger-hover:   #7A2626;
  --imj-danger-press:   #671e1e;
  --imj-danger-text:    #F5E0E0;
  --imj-danger-soft:    rgba(139, 46, 46, 0.07);
  --imj-danger-border:  rgba(139, 46, 46, 0.24);
  --imj-like:           #c0392b;
  --imj-like-soft:      rgba(192, 57, 43, 0.07);

  /* Neutral scale */
  --imj-n0:   #ffffff;
  --imj-n50:  #f7f5f1;
  --imj-n100: #eeebe4;
  --imj-n200: #dedad2;
  --imj-n300: #c4bfb5;
  --imj-n400: #9a968e;
  --imj-n500: #6d6a62;
  --imj-n600: #45433d;
  --imj-n700: #2b2921;
  --imj-n800: #1a1815;

  /* Contextual surfaces (remapped in dark mode below) */
  --imj-bg:             var(--imj-n0);
  --imj-surface:        var(--imj-n50);
  --imj-surface-2:      var(--imj-n100);
  --imj-border-soft:    var(--imj-n100);
  --imj-border:         var(--imj-n200);
  --imj-border-strong:  var(--imj-n300);
  --imj-text:           var(--imj-n700);
  --imj-text-2:         var(--imj-n500);
  --imj-text-muted:     var(--imj-n400);

  /* Shape */
  --imj-r:      999px;   /* pill */
  --imj-r-card: 0.75rem;

  /* Motion */
  --imj-ease:    0.12s ease;
  --imj-ease-md: 0.2s ease;

  /* Focus rings */
  --imj-ring:        0 0 0 3px rgba(201, 147, 58, 0.38);
  --imj-ring-danger: 0 0 0 3px rgba(139, 46, 46, 0.32);

  /* Button heights */
  --imj-h-xs: 1.5rem;    /* 24 px – tag */
  --imj-h-sm: 1.875rem;  /* 30 px */
  --imj-h-md: 2.25rem;   /* 36 px – default */
  --imj-h-lg: 2.875rem;  /* 46 px – hero */

  /* Horizontal padding */
  --imj-px-xs: 0.5rem;
  --imj-px-sm: 0.75rem;
  --imj-px-md: 1.125rem;
  --imj-px-lg: 1.5rem;

  /* Icon button sizes */
  --imj-icon-sm: 1.75rem;  /* 28 px */
  --imj-icon-md: 2rem;     /* 32 px */
  --imj-icon-lg: 2.375rem; /* 38 px */
}

.ij-theme-premium {
  background:
    radial-gradient(circle at top left, rgba(217, 123, 45, 0.18), transparent 28%),
    radial-gradient(circle at bottom right, rgba(31, 122, 92, 0.15), transparent 26%),
    linear-gradient(135deg, #f7f2e8 0%, #efe5d5 100%);
  color: var(--ij-color-text-primary);
}


/* ── IMJ Button Design System — dark mode token overrides ──────
   Mirrors --imj- surface/border/text tokens for dark backgrounds.
   Uses both @media and .dark class for maximum compatibility.
   ─────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --imj-bg:            #0f1c30;
    --imj-surface:       #152036;
    --imj-surface-2:     #1b2d48;
    --imj-border-soft:   rgba(232, 227, 213, 0.07);
    --imj-border:        rgba(232, 227, 213, 0.13);
    --imj-border-strong: rgba(232, 227, 213, 0.22);
    --imj-text:          #ddd8ca;
    --imj-text-2:        #9f9b93;
    --imj-text-muted:    rgba(221, 216, 202, 0.4);
    --imj-sand:          #ccc8bb;
    --imj-sand-soft:     rgba(204, 200, 187, 0.07);
    --imj-n50:           #152036;
    --imj-n100:          #1b2d48;
    --imj-n200:          #243658;
    --imj-n300:          #344f7a;
  }
}

.dark {
  --imj-bg:            #0f1c30;
  --imj-surface:       #152036;
  --imj-surface-2:     #1b2d48;
  --imj-border-soft:   rgba(232, 227, 213, 0.07);
  --imj-border:        rgba(232, 227, 213, 0.13);
  --imj-border-strong: rgba(232, 227, 213, 0.22);
  --imj-text:          #ddd8ca;
  --imj-text-2:        #9f9b93;
  --imj-text-muted:    rgba(221, 216, 202, 0.4);
  --imj-sand:          #ccc8bb;
  --imj-sand-soft:     rgba(204, 200, 187, 0.07);
  --imj-n50:           #152036;
  --imj-n100:          #1b2d48;
  --imj-n200:          #243658;
  --imj-n300:          #344f7a;
}