/* =============================================================
   IMS Marketplace — Design System Tokens (v2)
   Single source of truth for colors, type, spacing, effects.
   Generated from IMS_Marketplace_Design_System-v2.
   ============================================================= */

/* IMS Marketplace — Color tokens
   Derived from the plugin's public.css + admin.css palettes.
   Base palette (Tailwind-derived) + semantic aliases. */

:root {
  /* ── Brand / primary (blue) ──────────────────────────────── */
  --ims-blue-50:  #eff6ff;
  --ims-blue-100: #dbeafe;
  --ims-blue-200: #bfdbfe;
  --ims-blue-500: #2563eb;   /* primary */
  --ims-blue-600: #1d4ed8;   /* primary hover */
  --ims-blue-700: #1e40af;   /* deep text on tint */

  /* ── Accent (green = trials / success) ───────────────────── */
  --ims-green-50:  #f0fdf4;
  --ims-green-500: #16a34a;
  --ims-green-600: #15803d;

  /* ── Semantic status hues ────────────────────────────────── */
  --ims-amber-50:  #fffbeb;
  --ims-amber-500: #d97706;
  --ims-red-50:    #fef2f2;
  --ims-red-100:   #fecaca;
  --ims-red-500:   #dc2626;

  /* ── Neutral gray ramp ───────────────────────────────────── */
  --ims-gray-50:  #f9fafb;
  --ims-gray-100: #f3f4f6;
  --ims-gray-200: #e5e7eb;
  --ims-gray-300: #d1d5db;
  --ims-gray-400: #9ca3af;
  --ims-gray-500: #6b7280;
  --ims-gray-700: #374151;
  --ims-gray-900: #111827;
  --ims-white: #ffffff;

  /* ── Terminal / provisioner palette ──────────────────────── */
  --ims-term-bg:     #0d0d1a;
  --ims-term-chrome: #1e1e2e;
  --ims-term-cmd:    #7dd3fc;
  --ims-term-ok:     #86efac;
  --ims-term-out:    #94a3b8;
  --ims-term-title:  #7c7c8a;
  --ims-term-grad:   linear-gradient(90deg, #3b82f6, #06b6d4);   /* @kind color */
  --ims-dot-red:    #ff5f57;
  --ims-dot-amber:  #febc2e;
  --ims-dot-green:  #28c840;

  /* ── WordPress-admin palette (for admin surfaces) ────────── */
  --wp-blue:    #2271b1;
  --wp-text:    #1d2327;
  --wp-muted:   #646970;
  --wp-border:  #c3c4c7;
  --wp-green:   #00a32a;
  --wp-amber:   #dba617;
  --wp-red:     #d63638;

  /* ── Semantic aliases ────────────────────────────────────── */
  --color-primary:        var(--ims-blue-500);
  --color-primary-hover:  var(--ims-blue-600);
  --color-accent:         var(--ims-green-500);
  --color-accent-hover:   var(--ims-green-600);
  --color-danger:         var(--ims-red-500);
  --color-warning:        var(--ims-amber-500);
  --color-success:        var(--ims-green-500);

  --text-strong:   var(--ims-gray-900);
  --text-body:     var(--ims-gray-700);
  --text-muted:    var(--ims-gray-500);
  --text-faint:    var(--ims-gray-400);
  --text-on-color: var(--ims-white);
  --text-link:     var(--ims-blue-500);

  --surface-page:  var(--ims-gray-50);
  --surface-card:  var(--ims-white);
  --surface-sunken:var(--ims-gray-50);
  --surface-tint:  var(--ims-blue-50);

  --border-default: var(--ims-gray-200);
  --border-strong:  var(--ims-gray-300);
  --focus-ring:     0 0 0 3px rgba(37,99,235,.12);
}

/* IMS Marketplace — Typography tokens
   The product ships with the native system UI stack (no webfonts).
   We honor that: a system sans for UI, a system mono for code/terminal. */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Fira Code", "SF Mono", Menlo, Consolas, monospace;

  /* ── Type scale (px) ─────────────────────────────────────── */
  --text-xs:   11px;   /* badges, eyebrows, micro-hints */
  --text-sm:   13px;   /* secondary copy, table cells */
  --text-base: 14px;   /* body / button default */
  --text-md:   15px;   /* inputs, emphasised body */
  --text-lg:   16px;   /* card titles */
  --text-xl:   20px;   /* section headings, price */
  --text-2xl:  22px;   /* dashboard titles */
  --text-3xl:  24px;   /* success headlines */
  --text-4xl:  28px;   /* countdown numerals */
  --text-5xl:  32px;   /* admin stat values */

  /* ── Weights ─────────────────────────────────────────────── */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Line heights ────────────────────────────────────────── */
  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-base:  1.5;
  --leading-loose: 1.8;   /* terminal lines */

  /* ── Tracking ────────────────────────────────────────────── */
  --tracking-eyebrow: 0.05em;   /* uppercase labels */
  --tracking-badge:   0.06em;
}

/* IMS Marketplace — Spacing, radius & sizing tokens */

:root {
  /* ── Spacing scale ───────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 28px;
  --space-10: 40px;
  --space-12: 48px;
  --space-15: 60px;

  /* ── Corner radii ────────────────────────────────────────── */
  --radius-xs:  3px;   /* admin chips, thumbnails */
  --radius-sm:  6px;   /* small inner blocks */
  --radius-md:  8px;   /* buttons, inputs */
  --radius-lg:  10px;  /* cards */
  --radius-xl:  12px;  /* terminal frame, countdown */
  --radius-2xl: 16px;  /* modals, success panels */
  --radius-pill: 20px; /* badges, status pills */
  --radius-full: 9999px;

  /* ── Control sizing ──────────────────────────────────────── */
  --control-h:    40px;   /* default button/input height */
  --control-h-sm: 32px;
  --tap-min:      44px;   /* minimum touch target */

  /* ── Layout widths ───────────────────────────────────────── */
  --width-form:    540px;  /* trial form / popups */
  --width-dash:    640px;  /* customer dashboard */
  --width-content: 700px;  /* terminal / building screen */
  --width-admin:   1200px; /* WP admin shell */
  --card-min:      280px;  /* gallery grid min column */
}

/* IMS Marketplace — Elevation, borders & motion tokens */

:root {
  /* ── Shadows (soft, two-layer) ───────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.25);   /* modals */
  --shadow-focus: 0 0 0 3px rgba(37,99,235,.12);

  /* ── Borders ─────────────────────────────────────────────── */
  --border-width:      1px;
  --border-width-form: 1.5px;   /* inputs / outline buttons */
  --border-card:    1px solid var(--ims-gray-200);
  --border-input:   1.5px solid var(--ims-gray-200);
  --border-divider: 1px solid var(--ims-gray-100);

  /* status accent rail used on trial cards */
  --rail-width: 4px;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease: cubic-bezier(.4, 0, .2, 1);                              /* @kind other */
  --dur-fast:  .15s;                                               /* @kind other */
  --dur-base:  .2s;                                                /* @kind other */
  --dur-slow:  .3s;                                                /* @kind other */
  --transition-btn: background .15s, transform .1s, box-shadow .15s; /* @kind other */
  --transition-card: box-shadow .2s, transform .2s;               /* @kind other */

  /* press feedback */
  --press-translate: translateY(1px);                             /* @kind other */
  /* card hover lift */
  --hover-lift: translateY(-2px);                                 /* @kind other */

  /* ── Overlay / scrim ─────────────────────────────────────── */
  --scrim: rgba(0,0,0,.55);
  --scrim-blur: blur(2px);                                        /* @kind other */
}

/* IMS Marketplace — minimal base layer.
   Sets the brand defaults that the .ims-* namespace assumes.
   Scoped lightly so it can sit alongside a WP theme. */

.ims-root,
.ims-surface {
  font-family: var(--font-sans);
  color: var(--text-body);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Utility helpers used across specimen cards & kits */
.ims-eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-faint);
  font-weight: var(--weight-semibold);
}

.ims-mono { font-family: var(--font-mono); }

/* Brand focus ring for native controls inside an IMS surface */
.ims-surface input:focus,
.ims-surface textarea:focus,
.ims-surface select:focus,
.ims-root input:focus,
.ims-root textarea:focus,
.ims-root select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: var(--focus-ring);
}

.ims-subdomain-wrap:focus-within {
  border-color: var(--color-primary) !important;
  box-shadow: var(--focus-ring);
}

@keyframes ims-spin { to { transform: rotate(360deg); } }
@keyframes ims-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }