/* ============================================================
   Woven Reach — Colors & Type
   ------------------------------------------------------------
   Single source of truth for color tokens, font stacks, and
   semantic typography classes. Import this file at the root
   of any prototype or mock.

   Two surfaces are documented here:
     1.  Merchant app    — light, Polaris-aligned, Inter
     2.  Ops console     — dark, shadcn-aligned, Inter + JetBrains Mono
     3.  Marketing /     — warm light, Instrument Serif for display
         Brand surfaces

   The merchant app SHOULD use Polaris primitives at runtime —
   these tokens exist to keep prototypes consistent with the
   live product and to brand the Woven Reach-specific layers
   (workflow viewer, brand-extraction reveal, marketing).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ----------------------------------------------------------
     BRAND PALETTE — "Loom & Thread"
     ----------------------------------------------------------
     Loom Indigo is the through-line color. It signals the
     deliberate, woven, agentic nature of the product — the
     same blue-violet hue Shopify Polaris uses for its workflow
     edges (#5c6ac4) but pushed deeper for primary use.

     Thread Amber is the warm accent — used sparingly for the
     "send" / "reach" / commerce moment. Never as a body color.

     Parchment is the marketing background — warmer than pure
     white, evokes craft, paper, slow-considered emails.
     ---------------------------------------------------------- */

  --wr-loom-50:  #EEEEFB;
  --wr-loom-100: #DCDDF7;
  --wr-loom-200: #B8BAF0;
  --wr-loom-300: #9498E9;
  --wr-loom-400: #7174E1;
  --wr-loom-500: #5C6AC4;   /* Polaris workflow-edge indigo */
  --wr-loom-600: #4338CA;   /* PRIMARY — buttons, links, CTA */
  --wr-loom-700: #312E81;
  --wr-loom-800: #1F1B5A;
  --wr-loom-900: #0F0D33;
  --wr-loom-ink: #08081C;   /* Deepest — backgrounds, brand surfaces */

  --wr-thread-50:  #FDF3E7;
  --wr-thread-100: #FBE3C7;
  --wr-thread-200: #F6C792;
  --wr-thread-300: #EFA85C;
  --wr-thread-400: #E58E26;   /* ACCENT — used for "send" moments */
  --wr-thread-500: #C57420;
  --wr-thread-600: #9C5818;
  --wr-thread-700: #6E3D10;

  --wr-parchment:    #FAF7F2;   /* Marketing canvas */
  --wr-parchment-2:  #F2EDE3;   /* Marketing card / band */
  --wr-parchment-3:  #E8E0D0;   /* Marketing border */

  /* ----------------------------------------------------------
     NEUTRALS — Aligned to Polaris merchant-app palette
     so prototype <-> production handoff is one-to-one.
     ---------------------------------------------------------- */

  --wr-ink-900: #111315;       /* fg1 — primary text */
  --wr-ink-700: #303030;       /* fg1 on light surfaces */
  --wr-ink-500: #616161;       /* fg2 — subdued */
  --wr-ink-400: #8A8A8A;       /* fg3 — placeholder, muted */
  --wr-ink-300: #B5B5B5;
  --wr-ink-200: #E1E3E5;       /* divider, border */
  --wr-ink-100: #EBEBEB;       /* hairline border */
  --wr-ink-50:  #F1F1F1;       /* subdued surface */
  --wr-ink-0:   #FFFFFF;       /* surface */

  --wr-surface:          #FFFFFF;
  --wr-surface-subdued:  #FAFBFB;  /* Polaris bg */
  --wr-surface-secondary:#F6F6F7;
  --wr-surface-hover:    #F1F2F3;
  --wr-surface-pressed:  #E4E5E7;
  --wr-border:           #E1E3E5;
  --wr-border-strong:    #BABFC3;

  /* ----------------------------------------------------------
     SEMANTIC TONES — match Polaris Banner tones
     ---------------------------------------------------------- */

  --wr-success-bg:       #E5F5EA;
  --wr-success-border:   #95C8A6;
  --wr-success-fg:       #0E5C2F;
  --wr-success-strong:   #1A8D43;

  --wr-warning-bg:       #FFF5E6;
  --wr-warning-border:   #FFC453;
  --wr-warning-fg:       #6B4A05;
  --wr-warning-strong:   #B65C00;

  --wr-critical-bg:      #FBEAE5;
  --wr-critical-border:  #E59A8E;
  --wr-critical-fg:      #8E1F0B;
  --wr-critical-strong:  #C02B0F;

  --wr-info-bg:          #EAF5FE;
  --wr-info-border:      #5BCDDA;
  --wr-info-fg:          #0E4A6F;
  --wr-info-strong:      #2A6FDB;

  /* ----------------------------------------------------------
     WORKFLOW NODE COLORS — Lifted verbatim from
     app/components/WorkflowNode.tsx. These must stay in sync
     with the live product.
     ---------------------------------------------------------- */

  --wr-node-trigger-bg:    #F4F6F8;  --wr-node-trigger-border:  #8C9196;
  --wr-node-wait-bg:       #FFF7E6;  --wr-node-wait-border:     #FFC453;
  --wr-node-check-bg:      #EAF5FE;  --wr-node-check-border:    #5BCDDA;
  --wr-node-action-bg:     #F1F8F5;  --wr-node-action-border:   #50B83C;
  --wr-node-end-bg:        #FBEAE5;  --wr-node-end-border:      #DE3618;
  --wr-node-edge:          #5C6AC4;

  /* ----------------------------------------------------------
     OPS CONSOLE — Dark shadcn surface (lifted from
     app/styles/ops.css; HSL → hex for cross-tool portability)
     ---------------------------------------------------------- */

  --wr-ops-bg:                #050818;   /* hsl(224 71% 4%) */
  --wr-ops-fg:                #DDE3EE;   /* hsl(213 31% 91%) */
  --wr-ops-card:              #050818;
  --wr-ops-card-fg:           #DDE3EE;
  --wr-ops-muted:             #0F172A;   /* hsl(223 47% 11%) */
  --wr-ops-muted-fg:          #7A8699;   /* hsl(215 16% 57%) */
  --wr-ops-accent:            #1E2A44;   /* hsl(216 34% 17%) */
  --wr-ops-accent-fg:         #F4F6FA;
  --wr-ops-border:            #1E2A44;
  --wr-ops-input:             #1E2A44;
  --wr-ops-ring:              #1E2A44;
  --wr-ops-destructive:       #82201A;   /* hsl(0 63% 31%) */
  --wr-ops-destructive-fg:    #F4F6FA;
  --wr-ops-primary:           #F4F6FA;   /* primary in ops is high-contrast white */
  --wr-ops-primary-fg:        #14182E;   /* hsl(222 47% 11%) */

  /* ----------------------------------------------------------
     TYPOGRAPHY — Stacks
     Inter is loaded by the Shopify app shell from
     cdn.shopify.com/static/fonts/inter — we mirror it.
     ---------------------------------------------------------- */

  --wr-font-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wr-font-serif:  "Instrument Serif", "Iowan Old Style", "Apple Garamond", "Baskerville", Georgia, serif;
  --wr-font-mono:   "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale — anchored on Polaris but extended for marketing */
  --wr-text-2xs:  11px;
  --wr-text-xs:   12px;
  --wr-text-sm:   13px;
  --wr-text-md:   14px;     /* Polaris bodyMd */
  --wr-text-lg:   16px;     /* Polaris bodyLg */
  --wr-text-xl:   20px;     /* headingSm */
  --wr-text-2xl:  24px;     /* headingMd */
  --wr-text-3xl:  28px;     /* headingLg */
  --wr-text-4xl:  36px;     /* headingXl */
  --wr-text-5xl:  48px;     /* display marketing */
  --wr-text-6xl:  72px;     /* hero */
  --wr-text-7xl:  104px;    /* editorial hero */

  --wr-leading-tight:   1.05;
  --wr-leading-snug:    1.2;
  --wr-leading-normal:  1.4;
  --wr-leading-relaxed: 1.55;

  --wr-tracking-tight:  -0.02em;
  --wr-tracking-snug:   -0.01em;
  --wr-tracking-normal: 0;
  --wr-tracking-wide:   0.04em;
  --wr-tracking-caps:   0.12em;

  /* ----------------------------------------------------------
     SPACING — 4px base; matches Polaris space scale
     ---------------------------------------------------------- */

  --wr-space-0:   0;
  --wr-space-025: 1px;
  --wr-space-050: 2px;
  --wr-space-100: 4px;
  --wr-space-150: 6px;
  --wr-space-200: 8px;
  --wr-space-300: 12px;
  --wr-space-400: 16px;
  --wr-space-500: 20px;
  --wr-space-600: 24px;
  --wr-space-800: 32px;
  --wr-space-1000: 40px;
  --wr-space-1200: 48px;
  --wr-space-1600: 64px;
  --wr-space-2400: 96px;
  --wr-space-3200: 128px;

  /* ----------------------------------------------------------
     RADII — Polaris uses 6/8/12; Ops uses 0.5rem
     ---------------------------------------------------------- */

  --wr-radius-050: 2px;
  --wr-radius-100: 4px;
  --wr-radius-200: 6px;     /* Polaris small */
  --wr-radius-300: 8px;     /* Polaris medium / ops --radius */
  --wr-radius-400: 12px;    /* Polaris large — Card */
  --wr-radius-500: 16px;
  --wr-radius-600: 20px;
  --wr-radius-pill: 999px;

  /* ----------------------------------------------------------
     ELEVATION — soft, neutral. Polaris-flat as a default;
     marketing surfaces use a slightly deeper card shadow.
     ---------------------------------------------------------- */

  --wr-shadow-100: 0 1px 0 rgba(0, 0, 0, 0.05);
  --wr-shadow-200: 0 1px 2px rgba(31, 33, 36, 0.06), 0 0 0 1px rgba(31, 33, 36, 0.05);
  --wr-shadow-300: 0 4px 8px -2px rgba(31, 33, 36, 0.08), 0 0 0 1px rgba(31, 33, 36, 0.05);
  --wr-shadow-400: 0 12px 24px -8px rgba(15, 13, 51, 0.18), 0 2px 6px -2px rgba(15, 13, 51, 0.08);
  --wr-shadow-marketing: 0 24px 48px -16px rgba(15, 13, 51, 0.24), 0 4px 8px -2px rgba(15, 13, 51, 0.08);
  --wr-shadow-focus: 0 0 0 3px rgba(67, 56, 202, 0.35);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */

  --wr-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --wr-ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --wr-ease-emphasis:  cubic-bezier(0.2, 0.8, 0.2, 1);

  --wr-dur-instant: 80ms;
  --wr-dur-fast:    160ms;
  --wr-dur-base:    240ms;
  --wr-dur-slow:    360ms;
  --wr-dur-reveal:  600ms;  /* brand-extraction stage reveal */
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   Use these in prototypes; ALL classes use Inter unless they
   carry the `.wr-serif` modifier (marketing display only).
   ============================================================ */

.wr-display-hero {
  font-family: var(--wr-font-serif);
  font-size: clamp(48px, 8vw, var(--wr-text-7xl));
  line-height: var(--wr-leading-tight);
  letter-spacing: var(--wr-tracking-tight);
  font-weight: 400;
  color: var(--wr-ink-900);
}

.wr-display-xl {
  font-family: var(--wr-font-serif);
  font-size: var(--wr-text-6xl);
  line-height: var(--wr-leading-tight);
  letter-spacing: var(--wr-tracking-tight);
  font-weight: 400;
}

.wr-display-italic {
  font-family: var(--wr-font-serif);
  font-style: italic;
  font-weight: 400;
}

.wr-h1 {
  font-family: var(--wr-font-sans);
  font-size: var(--wr-text-4xl);
  line-height: var(--wr-leading-tight);
  letter-spacing: var(--wr-tracking-snug);
  font-weight: 600;
  color: var(--wr-ink-900);
}

.wr-h2 {
  font-family: var(--wr-font-sans);
  font-size: var(--wr-text-3xl);
  line-height: var(--wr-leading-snug);
  letter-spacing: var(--wr-tracking-snug);
  font-weight: 600;
  color: var(--wr-ink-900);
}

.wr-h3 {
  font-family: var(--wr-font-sans);
  font-size: var(--wr-text-2xl);
  line-height: var(--wr-leading-snug);
  font-weight: 600;
  color: var(--wr-ink-900);
}

.wr-h4 {
  font-family: var(--wr-font-sans);
  font-size: var(--wr-text-xl);
  line-height: var(--wr-leading-snug);
  font-weight: 600;
  color: var(--wr-ink-900);
}

.wr-body-lg {
  font-family: var(--wr-font-sans);
  font-size: var(--wr-text-lg);
  line-height: var(--wr-leading-relaxed);
  font-weight: 400;
  color: var(--wr-ink-700);
}

.wr-body {
  font-family: var(--wr-font-sans);
  font-size: var(--wr-text-md);
  line-height: var(--wr-leading-relaxed);
  font-weight: 400;
  color: var(--wr-ink-700);
}

.wr-body-sm {
  font-family: var(--wr-font-sans);
  font-size: var(--wr-text-sm);
  line-height: var(--wr-leading-relaxed);
  font-weight: 400;
  color: var(--wr-ink-500);
}

.wr-caption {
  font-family: var(--wr-font-sans);
  font-size: var(--wr-text-xs);
  line-height: var(--wr-leading-normal);
  font-weight: 500;
  color: var(--wr-ink-500);
}

.wr-eyebrow {
  font-family: var(--wr-font-sans);
  font-size: var(--wr-text-xs);
  line-height: 1;
  letter-spacing: var(--wr-tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--wr-loom-600);
}

.wr-code {
  font-family: var(--wr-font-mono);
  font-size: var(--wr-text-sm);
  font-weight: 500;
  color: var(--wr-ink-900);
  background: var(--wr-surface-secondary);
  padding: 1px 6px;
  border-radius: var(--wr-radius-100);
  border: 1px solid var(--wr-border);
}

.wr-subdued { color: var(--wr-ink-500); }
.wr-muted   { color: var(--wr-ink-400); }