/**
 * FeedER design tokens — ported directly from the canonical Design System
 * ("FeedER Design System" project, tokens/colors.css + typography.css +
 * spacing.css + fonts.css). This file is the single source of truth for the
 * admin panel's visual language; notion-admin.css and components.css consume
 * these variables (plus a handful of legacy aliases kept for compatibility
 * with code written before this port).
 */

/* Icon set: Iconoir — https://iconoir.com. Loaded globally so any admin
   template can use <i className="iconoir-<name>" /> without further setup. */
@import url("https://cdnjs.cloudflare.com/ajax/libs/iconoir/7.11.0/css/iconoir.css");

/* ---------- Dana (self-hosted, full weight range, brand-guidelines.md) ---------- */
@font-face { font-family: "Dana"; src: url("/design-static/fonts/Dana-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Dana"; src: url("/design-static/fonts/Dana-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Dana"; src: url("/design-static/fonts/Dana-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Dana"; src: url("/design-static/fonts/Dana-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Dana"; src: url("/design-static/fonts/Dana-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Dana"; src: url("/design-static/fonts/Dana-DemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Dana"; src: url("/design-static/fonts/Dana-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Dana"; src: url("/design-static/fonts/Dana-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Dana"; src: url("/design-static/fonts/Dana-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Dana"; src: url("/design-static/fonts/Dana-UltraBold.ttf") format("truetype"); font-weight: 950; font-style: normal; font-display: swap; }

:root {
  /* ---- Base ink scale (Notion's text is never pure black — warm near-black at reduced opacity) ---- */
  --ink: #191919;
  --text-primary: rgba(25, 25, 25, 0.92);
  --text-secondary: rgba(25, 25, 25, 0.65);
  --text-tertiary: rgba(25, 25, 25, 0.45);
  --text-disabled: rgba(25, 25, 25, 0.3);
  --text-on-dark: rgba(255, 255, 255, 0.95);
  --text-on-accent: #ffffff;

  /* ---- Surfaces ---- */
  --surface-page: #ffffff;
  --surface-sidebar: #f7f7f5;
  --surface-card: #ffffff;
  --surface-hover: rgba(25, 25, 25, 0.055);
  --surface-active: rgba(25, 25, 25, 0.09);
  --surface-overlay: #ffffff;
  --surface-dark: #191919;
  --surface-dark-panel: #2b2b2b;
  --surface-dark-sidebar: #202020;
  --surface-dark-hover: rgba(255, 255, 255, 0.055);

  /* ---- Borders ---- */
  --border-subtle: rgba(25, 25, 25, 0.09);
  --border-default: rgba(25, 25, 25, 0.13);
  --border-strong: rgba(25, 25, 25, 0.22);
  --border-on-dark: rgba(255, 255, 255, 0.13);

  /* ---- Brand / accent — original violet, not FeedER's brand-blue.
     AI Studio deliberately diverges from the FeedER visual language here
     (2026-07-17, confirmed by Pourya) to read as its own product. Variable
     names stay "--brand-blue-*" so every existing template/component keeps
     resolving without a rename. ---- */
  --brand-blue: #7c3aed;
  --brand-blue-hover: #6d28d9;
  --brand-blue-active: #5b21b6;
  --brand-blue-tint: #f2ebfe;
  --brand-blue-tint-hover: #e6d9fc;
  --ink-black: #0b0e14;
  --focus-ring: rgba(124, 58, 237, 0.35);

  --color-brand-blue-50: #F5F0FF;
  --color-brand-blue-100: #EBE0FE;
  --color-brand-blue-200: #D4BFFC;
  --color-brand-blue-300: #B594FA;
  --color-brand-blue-600: #6D28D9;
  --color-brand-blue-700: #5B21B6;
  --color-brand-blue-800: #4C1D95;
  --color-brand-blue-900: #3B1478;

  --color-ink-100: #E8ECF2;
  --color-ink-200: #CED5E4;
  --color-ink-700: #283348;
  --color-ink-800: #19212E;

  /* ---- Semantic status (Notion-style muted, low-saturation callout colors) ---- */
  --red: #e03e3e;      --red-tint: #fbe4e4;
  --orange: #d9730d;   --orange-tint: #faebdd;
  --yellow: #cb912f;   --yellow-tint: #fbf3db;
  --green: #448361;    --green-tint: #ddedea;
  --blue: #337ea9;     --blue-tint: #ddebf1;
  --purple: #9065b0;   --purple-tint: #eae4f2;
  --pink: #c14c8a;     --pink-tint: #f4dfeb;
  --gray: #787774;     --gray-tint: #f1f1ef;

  /* ---- Typography ----
     The product's UI copy is English, so --font-sans is a plain system stack
     and is the default everywhere. Dana is reserved for Persian/RTL content
     only (--font-persian) — apply it explicitly to the elements that actually
     hold Persian text (inputs/textareas/table cells with dir="auto"), not to
     English UI chrome. */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-persian: "Dana", var(--font-sans);

  --text-display: 700 40px/1.2 var(--font-sans);
  --text-page-title: 700 32px/1.25 var(--font-sans);
  --text-h1: 600 30px/1.3 var(--font-sans);
  --text-h2: 600 24px/1.35 var(--font-sans);
  --text-h3: 600 20px/1.4 var(--font-sans);
  --text-body-lg: 400 17px/1.6 var(--font-sans);
  --text-body: 400 16px/1.5 var(--font-sans);
  --text-body-sm: 400 14px/1.5 var(--font-sans);
  --text-caption: 500 12px/1.4 var(--font-sans);
  --text-label: 500 13px/1.35 var(--font-sans);

  /* ---- Spacing — 4px base unit ---- */
  --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;

  --content-max-width: 900px;
  --sidebar-width: 240px;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 9px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --radius-btn: 6px;
  --radius-btn-lg: 9px;
  --radius-card: 9px;
  --radius-card-lg: 12px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.06), 0 1px 1px rgba(15, 15, 15, 0.04);
  --shadow-md: 0 3px 6px rgba(15, 15, 15, 0.08), 0 1px 3px rgba(15, 15, 15, 0.06);
  --shadow-lg: 0 12px 28px rgba(15, 15, 15, 0.12), 0 2px 4px rgba(15, 15, 15, 0.08);
  --shadow-popover: 0 0 0 1px rgba(15, 15, 15, 0.05), 0 3px 6px rgba(15, 15, 15, 0.07), 0 9px 24px rgba(15, 15, 15, 0.1);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 100ms;
  --duration-base: 150ms;

  /* ---- Legacy aliases (kept so earlier admin-panel CSS keeps resolving) ---- */
  --color-brand-blue: var(--brand-blue);
  --color-accent-secondary: #3178FF;
  --color-ink: var(--ink-black);
  --color-neutral-gray: #6b7280;
  --color-off-white: #fafafa;
  --color-white: #ffffff;
  --surface: var(--surface-page);
  --surface-muted: var(--surface-sidebar);
  --border-color: var(--border-default);
}

/* Dark mode: swap ink <-> off-white, brand-blue stays constant */
[data-theme="dark"] {
  --surface: var(--surface-dark);
  --surface-muted: var(--color-ink-800);
  --text-primary: var(--text-on-dark);
  --text-secondary: rgba(255, 255, 255, 0.6);
  --border-color: var(--border-on-dark);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: var(--surface-dark);
    --surface-muted: var(--color-ink-800);
    --text-primary: var(--text-on-dark);
    --text-secondary: rgba(255, 255, 255, 0.6);
    --border-color: var(--border-on-dark);
  }
}