/* ---------------------------------------------------------------------------
 * Analytics AIML — Shared Design Tokens
 * ---------------------------------------------------------------------------
 * Used by: SEO Manager, SEO Content Writer, SEO Image Generator, Cold Outreach
 * Import: <link rel="stylesheet" href="/shared/design/tokens.css">
 *
 * Principle: professional corporate software aesthetic. White canvas,
 * warm stone neutrals, ink-black primary actions, blue accent for links
 * and focus. Inspired by Linear, Vercel, Stripe Dashboard, Retool.
 * ------------------------------------------------------------------------- */

:root {
  /* ── Surface (Claude Design Language — warm cream) ───────────────────── */
  --color-bg:            #FFFFFF;            /* card surface */
  --color-surface:       #FAF9F5;            /* cream canvas (page bg) */
  --color-surface-alt:   #F5F3EC;            /* soft surface, panels */
  --color-surface-hover: #EFECE6;            /* subtle hover */

  --color-border:        #E8E5E0;            /* default hairline */
  --color-border-soft:   #EFECE6;            /* softer panels */
  --color-border-strong: #D9D5CE;            /* inputs, hover borders */

  /* ── Ink (warm near-black) ──────────────────────────────────────────── */
  --color-ink:           #2D2A26;            /* primary text */
  --color-ink-muted:     #4A4743;            /* secondary */
  --color-ink-subtle:    #75716E;            /* tertiary */
  --color-ink-soft:      #9A9693;            /* placeholder */
  --color-ink-inverse:   #FAF9F5;            /* text on dark surfaces */

  /* ── Brand / Primary action — Claude terracotta ─────────────────────── */
  --color-primary:       #C96442;            /* buttons, active nav */
  --color-primary-hover: #B45834;            /* deeper terracotta */
  --color-primary-bg:    rgba(201, 100, 66, .08);  /* terracotta wash */
  --color-primary-ring:  rgba(201, 100, 66, .22);

  /* ── Accent (supporting teal, for secondary info accents) ───────────── */
  --color-accent:        #03626B;            /* AIML teal (supporting) */
  --color-accent-hover:  #024E55;
  --color-accent-bg:     rgba(3, 98, 107, .08);
  --color-accent-ring:   rgba(3, 98, 107, .22);

  /* ── Semantic status (Claude Design Language) ───────────────────────── */
  --color-success:       #0F8A5B;            /* warm green */
  --color-success-bg:    #F0FAF4;
  --color-success-border:#C7E8D4;

  --color-warning:       #B4651B;            /* warm amber */
  --color-warning-bg:    #FBF4EA;
  --color-warning-border:#EED9B9;

  --color-danger:        #B3371D;            /* warm red */
  --color-danger-bg:     #FBEEE9;
  --color-danger-border: #E9C4B7;

  --color-info:          #03626B;            /* teal (same as supporting accent) */
  --color-info-bg:       rgba(3, 98, 107, .08);
  --color-info-border:   rgba(3, 98, 107, .22);

  /* ── App header color strips (per-app identity, 3px top bar only) ──── */
  --strip-manager:       #0F766E;            /* teal-700, canonical hub */
  --strip-content:       #4338CA;            /* indigo-700, writing */
  --strip-image:         #B45309;            /* amber-700, creative */
  --strip-outreach:      #0A0A0A;            /* ink, outbound serious */

  /* ── Category chip tints (client badges, tag filters) ───────────────── */
  --chip-neutral-bg:     #F5F5F4;
  --chip-neutral-fg:     #44403C;
  --chip-blue-bg:        #EFF6FF;
  --chip-blue-fg:        #1D4ED8;
  --chip-green-bg:       #F0FDF4;
  --chip-green-fg:       #15803D;
  --chip-amber-bg:       #FFFBEB;
  --chip-amber-fg:       #B45309;
  --chip-rose-bg:        #FFF1F2;
  --chip-rose-fg:        #BE123C;
  --chip-violet-bg:      #F5F3FF;
  --chip-violet-fg:      #6D28D9;
  --chip-teal-bg:        #F0FDFA;
  --chip-teal-fg:        #0F766E;

  /* ── Typography (Claude Design Language) ────────────────────────────── */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; /* collapsed to sans per unified font rule */
  --font-mono:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; /* collapsed to sans — tabular-nums still applies */
  --font-serif:   'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; /* collapsed to sans */

  /* Type scale — 1.125 minor-second, tightened line-heights for density */
  --fs-xs:   0.75rem;    --lh-xs:   1rem;       /* 12 / 16 */
  --fs-sm:   0.8125rem;  --lh-sm:   1.25rem;    /* 13 / 20 — dense UI */
  --fs-base: 0.875rem;   --lh-base: 1.375rem;   /* 14 / 22 — default */
  --fs-md:   1rem;       --lh-md:   1.5rem;     /* 16 / 24 */
  --fs-lg:   1.125rem;   --lh-lg:   1.625rem;   /* 18 / 26 */
  --fs-xl:   1.25rem;    --lh-xl:   1.75rem;    /* 20 / 28 */
  --fs-2xl:  1.5rem;     --lh-2xl:  2rem;       /* 24 / 32 */
  --fs-3xl:  1.875rem;   --lh-3xl:  2.375rem;   /* 30 / 38 */
  --fs-4xl:  2.25rem;    --lh-4xl:  2.75rem;    /* 36 / 44 */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.01em;
  --tracking-caps:    0.04em;   /* small caps labels */

  /* ── Radius (Claude Design Language — softer) ──────────────────────── */
  --radius-none: 0;
  --radius-xs:   6px;    /* chips */
  --radius-sm:   8px;    /* inputs */
  --radius:      10px;   /* buttons */
  --radius-md:   12px;   /* cards */
  --radius-lg:   14px;   /* large cards */
  --radius-xl:   16px;   /* modals */
  --radius-full: 100px;

  /* ── Spacing (4pt grid) ─────────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Shadow (Claude Design Language — warm tonal) ────────────────────── */
  --shadow-none:  none;
  --shadow-xs:    0 1px 0 rgba(40, 35, 30, .04);
  --shadow-sm:    0 1px 2px rgba(40, 35, 30, .04);
  --shadow-md:    0 2px 6px rgba(40, 35, 30, .05), 0 1px 2px rgba(40, 35, 30, .04);
  --shadow-lg:    0 10px 24px -12px rgba(40, 35, 30, .14), 0 2px 6px rgba(40, 35, 30, .05);
  --shadow-modal: 0 20px 60px rgba(40, 35, 30, .18);
  --shadow-focus: 0 0 0 3px var(--color-primary-ring);
  --shadow-focus-accent: 0 0 0 3px var(--color-accent-ring);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ease-out:     cubic-bezier(.16, 1, .3, 1);
  --ease-in-out:  cubic-bezier(.65, 0, .35, 1);
  --dur-fast:     120ms;
  --dur:          160ms;
  --dur-slow:     240ms;
  --dur-page:     320ms;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --sidebar-w:           240px;
  --sidebar-w-collapsed: 56px;
  --topbar-h:            56px;
  --page-max:            1440px;
  --reading-max:         72ch;
  --form-max:            640px;

  /* ── Z-index ────────────────────────────────────────────────────────── */
  --z-base:     0;
  --z-sticky:   10;
  --z-sidebar:  20;
  --z-topbar:   30;
  --z-dropdown: 40;
  --z-modal:    50;
  --z-toast:    60;
  --z-tooltip:  70;
}

/* Global resets anchored on tokens */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-base);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--color-ink);
  background: var(--color-surface);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
a:hover { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; }

code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; }

::selection { background: var(--color-accent-bg); color: var(--color-ink); }

/* Scrollbar — subtle, matches neutrals */
* { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--color-ink-soft); }