/* SEO Factory admin — design tokens, bento v1.
   Source of truth: admin-frontend/src/tokens.css (the admin build reads it).
   docs/design/admin-tokens.css is a byte-for-byte copy for the design demo;
   tests/admin/test_design_tokens_sync.py keeps the two equal.
   Layers: primitive → semantic → component. Components use semantic and
   component tokens only; primitives are raw material.
   Built on the Orlov site design system (white canvas, grey fills without
   borders or shadows, one black pill action, colour only in spots, Inter)
   and adapted for a daily operator console. Rules and rationale: Design.md.
   Light only: the admin commits to one look and paints every colour itself. */

:root {
  /* ── Primitive: neutrals ─────────────────────────────────────────── */
  --gray-0: #FFFFFF;
  --gray-50: #FAFAFA;
  --gray-100: #F4F4F5;
  --gray-150: #EDEDEF;
  --gray-200: #E4E4E7;
  --gray-300: #D4D4D8;
  --gray-400: #A1A1AA;
  --gray-500: #737373;
  --gray-550: #636366;   /* small text on gray-100: 5.45:1 (was #6B6B6B, 4.85:1) */
  --gray-600: #52525B;
  --gray-800: #27272A;
  --gray-900: #18181B;
  --gray-950: #111111;

  /* ── Primitive: hues ─────────────────────────────────────────────── */
  --blue-50: #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --green-100: #DCFCE7;
  --green-500: #22C55E;
  --green-600: #16A34A;
  --green-700: #15803D;
  --yellow-100: #FEF3C7;
  --yellow-400: #FACC15;
  --amber-700: #9A5B06;
  --orange-600: #EA580C;
  --orange-700: #C2410C;
  --red-100: #FEE2E2;
  --red-400: #F87171;
  --red-500: #EF4444;
  --red-600: #DC2626;
  --red-700: #B91C1C;
  --violet-600: #7C3AED;
  --teal-600: #0D9488;
  --yandex-red: #CF2222;

  /* ── Semantic: surfaces ──────────────────────────────────────────── */
  --color-background: var(--gray-0);
  --color-surface: var(--gray-100);          /* bento tile, card, grouped list */
  --color-surface-hover: var(--gray-150);    /* clickable tile hover: one step, never a lift */
  --color-surface-pressed: var(--gray-200);
  --color-surface-subtle: var(--gray-50);
  --color-surface-raised: var(--gray-0);     /* menu, dialog, toast, palette */
  --color-surface-strong: var(--gray-900);   /* dark hero tile, one per screen */
  --color-surface-strong-2: rgba(255, 255, 255, 0.08); /* chip on the dark tile */
  --color-overlay: rgba(17, 17, 17, 0.32);   /* scrim behind dialog and palette */

  /* ── Semantic: text ──────────────────────────────────────────────── */
  --color-ink: var(--gray-950);              /* titles, numbers, active text */
  --color-ink-muted: var(--gray-600);        /* body, secondary text */
  --color-ink-subtle: var(--gray-550);       /* captions, meta, time */
  --color-ink-placeholder: var(--gray-400);  /* placeholder and idle icon only */
  --color-ink-inverse: var(--gray-0);
  --color-ink-inverse-muted: rgba(255, 255, 255, 0.68);

  /* ── Semantic: action ────────────────────────────────────────────── */
  --color-cta: var(--gray-950);              /* the one primary action: black */
  --color-cta-hover: var(--gray-800);
  --color-cta-foreground: var(--gray-0);
  --color-cta-inverse: var(--gray-0);        /* primary on the dark tile */
  --color-cta-inverse-foreground: var(--gray-950);
  --color-accent: var(--blue-500);           /* functional only: active bars, checkbox, progress */
  --color-link: var(--blue-600);
  --color-focus: var(--blue-500);
  --color-border: var(--gray-200);           /* inner list divider only */
  --color-disabled: var(--gray-200);
  --color-disabled-foreground: var(--gray-400);

  /* ── Semantic: status (text + fill pairs, all ≥ 4.5:1) ───────────── */
  --color-success: var(--green-700);
  --color-success-fill: var(--green-100);
  --color-success-mark: var(--green-500);    /* check glyph, live dot */
  --color-warning: var(--amber-700);
  --color-warning-fill: var(--yellow-100);
  --color-warning-mark: var(--yellow-400);   /* tariff-style badge, black text */
  --color-danger: var(--red-700);
  --color-danger-fill: var(--red-100);
  --color-danger-mark: var(--red-600);
  --color-danger-on-dark: var(--red-400);  /* error glyph on a dark toast */
  --color-info: var(--blue-700);
  --color-info-fill: var(--blue-100);
  --color-neutral: var(--gray-600);
  --color-neutral-fill: var(--gray-200);

  /* Quality score bands and search sources: identity, not status. */
  --color-quality-red: var(--red-600);
  --color-quality-orange: var(--orange-700);
  --color-quality-yellow: var(--amber-700);
  --color-quality-green: var(--green-700);
  --color-source-google: var(--blue-600);
  --color-source-yandex: var(--yandex-red);

  /* Category icon tiles: white glyph ≥ 3:1. Category, never action. */
  --tile-blue: var(--blue-500);
  --tile-violet: var(--violet-600);
  --tile-orange: var(--orange-600);          /* was #FB923C, 2.26:1 */
  --tile-teal: var(--teal-600);              /* was #14B8A6, 2.49:1 */
  --tile-green: var(--green-600);            /* was #22C55E, 2.28:1 */
  --tile-red: var(--red-500);
  --tile-dark: var(--gray-950);

  /* Charts: inactive bars grey, the latest two or three accent. */
  --chart-grid: var(--gray-200);
  --chart-axis: var(--gray-550);
  --chart-bar: var(--gray-200);
  --chart-bar-active: var(--blue-500);
  --chart-impressions: var(--blue-200);
  --chart-views: var(--blue-600);

  /* ── Typography ──────────────────────────────────────────────────── */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* code editor only */

  --font-size-caption: 0.8125rem;  /* 13 */
  --font-size-label: 0.875rem;     /* 14 */
  --font-size-body: 1rem;          /* 16 */
  --font-size-body-lg: 1.0625rem;  /* 17 */
  --font-size-title-sm: 1.125rem;  /* 18 */
  --font-size-title: 1.25rem;      /* 20 */
  --font-size-title-lg: 1.75rem;   /* 28 */
  --font-size-display: 2.5rem;     /* 40, 48 at ≥1024 */
  --font-size-stat: 2.5rem;        /* 40, 48 at ≥1024 */
  --font-size-stat-sm: 1.75rem;    /* 28, secondary stat in a small tile */

  --font-weight-body: 400;
  --font-weight-label: 500;
  --font-weight-strong: 600;
  --font-weight-title: 700;
  --font-weight-display: 800;

  --line-height-display: 1.15;
  --line-height-title: 1.25;
  --line-height-body: 1.5;
  --line-height-caption: 1.4;
  --letter-spacing-display: -0.02em;

  /* ── Space: 4px base ─────────────────────────────────────────────── */
  --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-page-x: 16px;            /* 24 at ≥768, 32 at ≥1024 */
  --space-section: var(--space-10);
  --space-card: var(--space-5);
  --space-stack: var(--space-3);

  --container-page: 1320px;        /* admin screens */
  --container-reading: 720px;      /* article reading view, settings forms */

  /* ── Density: comfortable by default, compact for long lists ─────── */
  --row-height: 56px;
  --row-pad-y: var(--space-3);
  --control-height: 44px;          /* minimum hit area */

  /* ── Radius ──────────────────────────────────────────────────────── */
  --radius-sm: 8px;                /* small badge */
  --radius-md: 12px;               /* icon tile, tooltip, menu item */
  --radius-lg: 20px;               /* tile, card, input */
  --radius-xl: 24px;               /* hero tile, dialog */
  --radius-full: 9999px;           /* button, chip, tab, switch, avatar */

  /* ── Elevation: floating layers only ─────────────────────────────── */
  --shadow-none: none;
  --shadow-float: 0 8px 32px rgba(17, 17, 17, 0.12);
  --shadow-float-lg: 0 24px 64px rgba(17, 17, 17, 0.18);
  --focus-ring: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-focus);

  /* ── Z-index ─────────────────────────────────────────────────────── */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-modal: 100;
  --z-toast: 1000;

  /* ── Motion: transform and opacity only ──────────────────────────── */
  --duration-instant: 100ms;       /* press feedback */
  --duration-fast: 150ms;          /* hover, colour, tooltip */
  --duration-default: 200ms;       /* tabs, chips, menus, toggles */
  --duration-slow: 300ms;          /* dialogs, tiles entering, disclosure */
  --duration-count: 700ms;         /* number count-up, ring and bar draw */
  --duration-exit-ratio: 0.7;      /* exits run at ~70% of the entrance */
  --stagger: 40ms;                 /* delay step between tiles in a cascade */
  --easing-out: cubic-bezier(0.16, 1, 0.3, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* switch thumb and check mark only */
  --press-scale: 0.98;

  /* ── Bento grid ──────────────────────────────────────────────────── */
  --bento-columns: 2;              /* 6 at ≥768, 12 at ≥1024 */
  --bento-gap: var(--space-3);     /* 16 at ≥1024 */
  --bento-row: 148px;              /* one row unit; tiles span 1–3 rows */

  /* ── Component tokens ────────────────────────────────────────────── */
  --button-height: var(--control-height);
  --button-height-lg: 52px;
  --button-height-sm: 36px;
  --button-pad-x: var(--space-5);
  --button-primary-bg: var(--color-cta);
  --button-primary-bg-hover: var(--color-cta-hover);
  --button-primary-fg: var(--color-cta-foreground);
  --chip-height: 36px;
  --chip-selected-bg: var(--color-cta);
  --chip-selected-fg: var(--color-ink-inverse);
  --input-height: 48px;
  --input-bg: var(--color-surface);
  --input-radius: var(--radius-lg);
  --tile-size: 40px;
  --tile-size-lg: 48px;
  --tile-radius: var(--radius-md);
  --card-bg: var(--color-surface);
  --card-radius: var(--radius-lg);
  --card-pad: var(--space-card);
  --switch-width: 44px;
  --switch-height: 24px;
  --toast-width: 360px;
  --dialog-width: 440px;
}

@media (min-width: 768px) {
  :root {
    --space-page-x: 24px;
    --bento-columns: 6;
  }
}

@media (min-width: 1024px) {
  :root {
    --space-page-x: 32px;
    --bento-columns: 12;
    --bento-gap: var(--space-4);
    --font-size-display: 3rem;
    --font-size-stat: 3rem;
  }
}

/* Compact density: set data-density="compact" on a list, table or page. */
[data-density="compact"] {
  --row-height: 44px;
  --row-pad-y: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-default: 0ms;
    --duration-slow: 0ms;
    --duration-count: 0ms;
    --stagger: 0ms;
  }
}