/* FeedSync design tokens - the single source of truth for all three surfaces
   (marketing site, merchant /app, agency /admin). Change a value here and it
   updates everywhere. Tokens ONLY: no element/component rules (those live in
   base.css and the per-surface files).

   LIGHT CANVAS, Sentry-flavoured craft: white & off-white surfaces, deep navy
   (#1D2A40) ink, a vivid blue (#0052FF) accent, and the #0052FF->#1D2A40 gradient
   used as a glow/edge device (never as a dark page fill - no dark backgrounds
   anywhere). Depth via soft layered shadows + the app shell's white rail; the
   look is tactile (S.C.R.A.P.S.): buttons LIFT to greet the cursor, inputs SINK
   to receive text. */

:root {
  /* Brand */
  --color-primary: #0052ff;        /* vivid blue - accent / text / link / nav role */
  --color-primary-strong: #0040cc; /* hover/active */
  /* Button FILL (solid bg + white text). Same as --color-primary in light; in dark
     it darkens so white text keeps AA, while --color-primary stays bright for its
     text/link role (the two can't be one value on a dark canvas). */
  --color-primary-fill: var(--color-primary);
  --color-primary-fill-strong: var(--color-primary-strong);
  --color-primary-bright: #3d77ff; /* lighter accent on dark bands */
  --color-primary-soft: #e7efff;   /* tinted surfaces, selected rows, active nav */
  --color-primary-softer: #f2f6ff; /* faintest wash / row hover */
  --color-link: #0052ff;           /* inline links */
  --color-ink: #1d2a40;            /* deep navy - headings, footer, dark bands */
  --color-ink-soft: #2a3a57;       /* raised navy */
  --color-on-brand: #ffffff;       /* text/marks on a brand-coloured / dark fill */
  /* The impersonation banner is an inverted (always-dark) bar in BOTH themes, so
     it has its own bg token - it can't ride --color-ink (which flips to light in
     dark mode for headings). */
  --color-banner-bg: #1d2a40;

  /* The site gradient (#0052FF -> #1D2A40) - hero band, CTA band, accents. Used
     with intent, not sprayed. A vivid all-blue variant for tactile accents. */
  --brand-gradient: linear-gradient(120deg, #0052ff 0%, #1d2a40 100%);
  --brand-gradient-vivid: linear-gradient(120deg, #0a5cff 0%, #3d77ff 100%);
  --brand-glow: radial-gradient(60% 70% at 50% 0%, rgba(0, 82, 255, 0.18), transparent 70%);

  /* Neutrals (light) */
  --color-text: #2b3a52;           /* body text on white */
  --color-muted: #5a6b85;          /* secondary text, captions (AA on white) */
  --color-faint: #8493ad;          /* placeholders, decorative */
  --color-border: #e4e9f1;         /* hairlines, card borders */
  --color-border-strong: #ccd5e3;  /* inputs, dividers needing more weight */
  --color-bg: #f5f8fd;             /* page canvas (faint cool off-white) */
  --color-surface: #ffffff;        /* cards, panels, sidebar rail */
  --color-surface-2: #eef3fb;      /* table headers, insets */
  --color-sunken: #eef2f9;         /* recessed inputs at rest (tactile sink) */
  --color-sidebar: #ffffff;        /* app/admin sidebar rail (white, with border) */
  --color-sidebar-hover: #eef3fb;  /* sidebar item hover wash */

  /* Semantic (status) - light: dark text on a light tint + border */
  --color-success: #137a43;
  --color-success-bg: #e6f7ee;
  --color-success-border: #b6e6c9;
  --color-warning: #9a5b00;
  --color-warning-bg: #fdf3d7;
  --color-warning-border: #f3d79a;
  --color-danger: #d92d2d;         /* danger accent / text role */
  --color-danger-strong: #b51f1f;  /* hover */
  --color-danger-fill: var(--color-danger);          /* solid danger button / WRITE banner fill */
  --color-danger-fill-strong: var(--color-danger-strong);
  --color-danger-text: #c42b2b;    /* danger TEXT on a light tint (pills/badges) */
  --color-danger-bg: #fdebeb;
  --color-danger-border: #f6c9c9;
  --color-info: #0052ff;
  --color-info-bg: #e7efff;
  --color-info-border: #c3d6ff;

  /* error-code severity (docs/error-codes.md): 4xx = merchant-actionable
     (warning), 5xx = server/Shoptet-side (danger). */
  --color-code-actionable: var(--color-warning);
  --color-code-actionable-bg: var(--color-warning-bg);
  --color-code-actionable-border: var(--color-warning-border);
  --color-code-server: var(--color-danger-text);
  --color-code-server-bg: var(--color-danger-bg);
  --color-code-server-border: var(--color-danger-border);

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bricolage Grotesque", var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

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

  /* Radii */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows - S.C.R.A.P.S. tactile depth (navy-tinted, soft, layered) */
  --shadow-xs: 0 1px 2px rgba(29, 42, 64, 0.06);
  --shadow-sm: 0 1px 3px rgba(29, 42, 64, 0.08), 0 1px 2px rgba(29, 42, 64, 0.05);
  --shadow-md: 0 8px 20px -6px rgba(29, 42, 64, 0.14);
  --shadow-lg: 0 22px 48px -14px rgba(29, 42, 64, 0.22);
  /* Buttons rest with a small lip, then LIFT to greet the cursor. */
  --shadow-btn: 0 1px 1px rgba(29, 42, 64, 0.18), 0 2px 4px rgba(29, 42, 64, 0.10);
  --shadow-btn-hover: 0 6px 16px -4px rgba(0, 82, 255, 0.42), 0 2px 4px rgba(29, 42, 64, 0.12);
  /* Inputs SINK into the page (inset) until focused. */
  --shadow-inset: inset 0 1px 2px rgba(29, 42, 64, 0.12);
  --shadow-focus: 0 0 0 3px rgba(0, 82, 255, 0.28);
  /* Form controls: the custom <select> dropdown chevron. Themed so the arrow
     tracks --color-faint in light/dark instead of a hardcoded SVG colour. */
  --select-chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238493ad'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
  /* Motion: tactile, purposeful - not flashy. */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Layout */
  --container: 64rem;
  --container-wide: 72rem;
  --sidebar-w: 15.5rem;            /* app/admin left sidebar width */
}

/* DARK THEME - opt-in via <html data-theme="dark"> (merchant /app + agency /admin
   only; the marketing site stays light). Same token NAMES, remapped values, so
   every component adapts with no per-component dark rules. Sentry-style: deep
   navy canvas, raised charcoal surfaces, a brighter blue accent for contrast.
   --color-banner-bg deliberately stays navy (the impersonation bar is inverted
   in both themes). */
:root[data-theme="dark"] {
  --color-primary: #5b8cff;        /* text/link/nav role - bright for dark surfaces */
  --color-primary-strong: #4a7cf5;
  --color-primary-bright: #82a6ff;
  --color-primary-fill: #3a6cdb;        /* darker so white button text keeps AA (4.8:1) */
  --color-primary-fill-strong: #3461c9; /* hover (darker, not lighter) */
  --color-primary-soft: #1a2747;   /* active nav / selected rows */
  --color-primary-softer: #141d33; /* faint wash / row hover */
  --color-link: #82a6ff;
  --color-ink: #eef2f8;            /* headings -> light */
  --color-ink-soft: #d2dae8;

  --brand-glow: radial-gradient(60% 70% at 50% 0%, rgba(91, 140, 255, 0.16), transparent 70%);
  /* blue->blue (no navy tail) so progress/usage meter fills stay visible on dark */
  --brand-gradient: linear-gradient(120deg, #5b8cff 0%, #82a6ff 100%);

  --color-text: #bcc7da;
  --color-muted: #8794ab;
  --color-faint: #7e8bad;          /* brightened: it carries info (nav labels, step labels) */
  --color-border: #232f48;
  --color-border-strong: #34415e;
  --color-bg: #0c1220;
  --color-surface: #131c2e;
  --color-surface-2: #1b2740;
  --color-sunken: #0d1422;
  --color-sidebar: #0e1525;
  --color-sidebar-hover: #1a2540;

  --color-success: #5fd39a; --color-success-bg: #0f2419; --color-success-border: #1e4733;
  --color-warning: #f0b95a; --color-warning-bg: #2a2310; --color-warning-border: #4a3d16;
  --color-danger: #e85555; --color-danger-strong: #f87171; --color-danger-text: #f08a8a;
  --color-danger-bg: #2a1517; --color-danger-border: #4d2327;
  --color-info: #5b8cff; --color-info-bg: #15233f; --color-info-border: #284069;

  --color-code-actionable: var(--color-warning);
  --color-code-actionable-bg: var(--color-warning-bg);
  --color-code-actionable-border: var(--color-warning-border);
  --color-code-server: var(--color-danger-text);
  --color-code-server-bg: var(--color-danger-bg);
  --color-code-server-border: var(--color-danger-border);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 22px 48px -14px rgba(0, 0, 0, 0.7);
  --shadow-btn: 0 1px 1px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-btn-hover: 0 6px 16px -4px rgba(91, 140, 255, 0.45), 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px rgba(91, 140, 255, 0.4);
  --select-chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%237e8bad'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m6%209%206%206%206-6'/%3E%3C/svg%3E");
}