/* =========================================================================
   tokens.css
   Design tokens taken verbatim from the Supabase style reference.
   Single source of truth — every other stylesheet reads from these
   variables only. Nothing here defines layout, only values.
   ========================================================================= */

:root {
  /* Colors — exact reference palette */
  --color-phosphor-green: #3ecf8e;
  --color-mint-pulse: #00c573;
  --color-forest-depth: #1f4b37;
  --color-midnight-emerald: #006239;
  --color-snow: #fafafa;
  --color-silver-mist: #b4b4b4;
  --color-smoke: #898989;
  --color-graphite: #4d4d4d;
  --color-slate: #393939;
  --color-charcoal: #2e2e2e;
  --color-ash: #242424;
  --color-obsidian: #121212;
  --color-danger: #ef4444;
  --color-danger-bg: #3a1414;
  --color-danger-border: #4d2020;
  --color-warning-bg: #3a2f12;
  --color-warning-fg: #fde68a;

  /* Typography — Circular substitute: Inter */
  --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tracking-tight: -0.007em;

  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Type scale (reference values, converted to rem @ 16px root) */
  --text-caption: 0.75rem;      /* 12px */
  --leading-caption: 1.5;
  --text-body-sm: 0.875rem;     /* 14px */
  --leading-body-sm: 1.43;
  --text-body: 1rem;            /* 16px */
  --leading-body: 1.5;
  --text-subheading: 1.125rem;  /* 18px */
  --leading-subheading: 1.38;
  --text-heading-sm: 1.5rem;    /* 24px */
  --leading-heading-sm: 1.33;
  --text-heading: 2.25rem;      /* 36px */
  --leading-heading: 1.2;
  --text-display: 4.5rem;       /* 72px */
  --leading-display: 1;

  /* Spacing scale — reference 8px base unit */
  --spacing-8: 0.5rem;
  --spacing-16: 1rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
  --spacing-40: 2.5rem;
  --spacing-48: 3rem;
  --spacing-64: 4rem;
  --spacing-80: 5rem;
  --spacing-96: 6rem;

  /* Aliases used across the admin stylesheets (fluid, but anchored to
     the reference scale above so density matches the reference at
     normal desktop widths) */
  --space-1: var(--spacing-8);
  --space-2: var(--spacing-16);
  --space-3: var(--spacing-24);
  --space-4: var(--spacing-32);

  /* Border radius — reference values exactly */
  --radius-tags: 9999px;
  --radius-cards: 1rem;      /* 16px */
  --radius-inputs: 0.5rem;   /* 8px */
  --radius-buttons: 9999px;

  /* Card padding per reference ("Card padding: 24px") */
  --card-padding: var(--spacing-24);

  /* Structural widths (admin-specific, not part of the reference).
     --rail-width is wide enough for icon + a two-line Russian label
     side by side without truncation on desktops; it narrows in two
     steps (see the media queries at the end of this file) so it
     never overpowers the content area on tablets/laptops or phones. */
  --rail-width: clamp(13rem, 16vw, 17rem);
  --rail-width-collapsed: 3.75rem;
  --panel-width: clamp(14rem, 18vw, 17.5rem);

  /* Django admin CSS variable overrides */
  --primary: var(--color-phosphor-green);
  --primary-fg: var(--color-snow);
  --secondary: var(--color-ash);
  --accent: var(--color-phosphor-green);
  --body-fg: var(--color-snow);
  --body-bg: var(--color-obsidian);
  --body-quiet-color: var(--color-smoke);
  --body-loud-color: var(--color-snow);
  --header-color: var(--color-snow);
  --header-branding-color: var(--color-snow);
  --header-bg: var(--color-obsidian);
  --header-link-color: var(--color-snow);
  --breadcrumbs-fg: var(--color-silver-mist);
  --breadcrumbs-link-fg: var(--color-smoke);
  --breadcrumbs-bg: var(--color-obsidian);
  --link-fg: var(--color-mint-pulse);
  --link-hover-color: var(--color-phosphor-green);
  --link-selected-fg: var(--color-phosphor-green);
  --hairline-color: var(--color-charcoal);
  --border-color: var(--color-charcoal);
  --error-fg: var(--color-danger);
  --message-success-bg: rgba(62, 207, 142, 0.08);
  --message-warning-bg: rgba(255, 255, 255, 0.03);
  --message-error-bg: rgba(239, 68, 68, 0.08);
  --darkened-bg: var(--color-ash);
  --selected-bg: var(--color-ash);
  --selected-row: #1a2620;
  --button-fg: var(--color-snow);
  --button-bg: var(--color-phosphor-green);
  --button-hover-bg: var(--color-mint-pulse);
  --default-button-bg: var(--color-phosphor-green);
  --default-button-hover-bg: var(--color-mint-pulse);
  --close-button-bg: var(--color-graphite);
  --close-button-hover-bg: var(--color-slate);
  --delete-button-bg: #b91c1c;
  --delete-button-hover-bg: #991b1b;
  --object-tools-bg: var(--color-phosphor-green);
  --object-tools-hover-bg: var(--color-mint-pulse);
  --font-family-primary: var(--font-ui);
  --font-family-monospace: var(--font-mono);
}

/* ---- Responsive rail/panel widths ------------------------------------
   Three tiers, matched by rail.css and structure.css:
   > 1024px desktop (defaults above), 641–1024px compact, <= 640px icon-only. */
@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --rail-width: 6.5rem;
    --panel-width: clamp(11rem, 22vw, 13rem);
  }
}

@media (max-width: 640px) {
  :root {
    --rail-width: var(--rail-width-collapsed);
  }
}