/*
 * 8rney Design System — design tokens
 * ------------------------------------
 * Runtime CSS custom properties. Single source of truth for color, elevation,
 * geometry and motion across web, desk, landing and mobile. `theme.css` maps
 * these into Tailwind so they are reachable as utilities (bg-surface, text-ink,
 * border-subtle, ...). Never reach past the semantic names into a raw hex.
 *
 * Identity: ink / paper / oxblood.
 *   - INK is structure. Chrome, sidebars, headers, high-emphasis surfaces.
 *   - OXBLOOD is action. It is the single accent, reserved for action,
 *     selection, focus and provenance. Taken from the 8rney logo (#9b0015).
 *   - Everything else is warm neutral, hairline rules, generous whitespace.
 *
 * Structure follows the LegalWork system that ships in apps/desk: separate
 * named ramps for surfaces, text, borders and interaction state, so a hover
 * fill is never the same token as an elevation step.
 *
 * Re-theme at runtime by overriding the vars under `.dark` / [data-theme].
 */

:root {
  color-scheme: light;

  /* ---- Neutral ramp (warm) ----------------------------------------------- */
  --a8-white: #ffffff;
  --a8-gray-25: #fcfcfb;
  --a8-gray-50: #f8f7f6;
  --a8-gray-100: #f2f1ef;
  --a8-gray-150: #ecebe8;
  --a8-gray-200: #e4e2df;
  --a8-gray-300: #d5d3ce;
  --a8-gray-400: #b5b2ac;
  --a8-gray-500: #8e8b85;
  --a8-gray-600: #6b6862;
  --a8-gray-700: #52504b;
  --a8-gray-800: #35332f;
  --a8-gray-900: #1c1b19;
  --a8-ink: #0d0b0a;
  --a8-ink-deep: #060505;

  /* ---- Oxblood (brand accent) -------------------------------------------- */
  /* 600 is the logo colour and the reference for the whole ramp. */
  --a8-oxblood-50: #fdf2f4;
  --a8-oxblood-100: #f9e4e8;
  --a8-oxblood-200: #f2c6ce;
  --a8-oxblood-300: #e59aa8;
  --a8-oxblood-400: #d1566d;
  --a8-oxblood-500: #b31228;
  --a8-oxblood-600: #9b0015;
  --a8-oxblood-700: #7a0011;
  --a8-oxblood-800: #5b0012;
  --a8-oxblood-900: #3a0710;
  --a8-oxblood-950: #240407;

  /* ---- Accent (the one interactive colour) -------------------------------- */
  /* 8.7:1 on paper — passes AAA for body text. */
  --a8-accent: #9b0015;
  --a8-accent-rgb: 155 0 21;
  --a8-accent-hover: #7a0011;
  --a8-accent-active: #5b0012;
  --a8-accent-fg: #ffffff;
  --a8-accent-soft: #fdf2f4;
  --a8-accent-soft-hover: #f9e4e8;
  --a8-accent-border: #f2c6ce;

  /* ---- Semantic status ---------------------------------------------------- */
  /* Danger is deliberately BRIGHTER and lighter than oxblood so a destructive
     fill never reads as a brand fill. Never signal destructive intent with
     hue alone — pair the token with an explicit confirm affordance. */
  --a8-success: #147447;
  --a8-success-soft: #ecf8f1;
  --a8-warning: #9a5b13;
  --a8-warning-soft: #fff7e8;
  --a8-danger: #e5484d;          /* fills, borders, indicators */
  --a8-danger-strong: #b3261e;   /* text on paper — 6.5:1 */
  --a8-danger-hover: #d13c41;
  --a8-danger-soft: #fdeaeb;
  --a8-info: #315c8c;            /* distinct from brand, on purpose */
  --a8-info-soft: #eef5fb;

  /* ---- Surfaces ----------------------------------------------------------- */
  --a8-canvas: #ffffff;          /* main content background */
  --a8-surface: #ffffff;         /* cards, popovers, inputs */
  --a8-surface-hover: #f8f7f6;
  --a8-sunken: #f8f7f6;          /* insets, segmented track, wells */
  --a8-sidebar: #f8f7f6;         /* left rail */
  --a8-overlay: rgba(13, 11, 10, 0.28);

  /* ---- Text --------------------------------------------------------------- */
  --a8-text-primary: #0d0b0a;
  --a8-text-secondary: #6b6862;
  --a8-text-tertiary: #8e8b85;
  --a8-text-placeholder: #b5b2ac;
  --a8-text-inverse: #ffffff;
  --a8-text-on-ink: #ffffff;

  /* ---- Primary (ink) fills — structure, not action ------------------------ */
  --a8-primary: #0d0b0a;
  --a8-primary-hover: #1c1b19;
  --a8-primary-active: #35332f;
  --a8-primary-fg: #ffffff;

  /* ---- Borders / lines ---------------------------------------------------- */
  --a8-border-subtle: rgba(13, 11, 10, 0.06);
  --a8-border: rgba(13, 11, 10, 0.10);
  --a8-border-strong: rgba(13, 11, 10, 0.16);
  --a8-border-inverse: rgba(255, 255, 255, 0.14);

  /* ---- Interaction states -------------------------------------------------- */
  --a8-hover: rgba(13, 11, 10, 0.04);
  --a8-active: rgba(13, 11, 10, 0.07);
  --a8-selected: var(--a8-accent-soft);
  --a8-focus-ring: rgba(155, 0, 21, 0.40);
  --a8-focus-ring-ink: rgba(13, 11, 10, 0.28);

  /* ---- Elevation ----------------------------------------------------------- */
  --a8-shadow-xs: 0 1px 2px rgba(13, 11, 10, 0.05);
  --a8-shadow-sm: 0 1px 3px rgba(13, 11, 10, 0.07), 0 1px 2px rgba(13, 11, 10, 0.04);
  --a8-shadow-md: 0 6px 16px rgba(13, 11, 10, 0.10), 0 2px 5px rgba(13, 11, 10, 0.05);
  --a8-shadow-lg: 0 16px 40px rgba(13, 11, 10, 0.14), 0 4px 10px rgba(13, 11, 10, 0.06);
  --a8-shadow-pop: 0 8px 28px rgba(13, 11, 10, 0.12);

  /* ---- Radius -------------------------------------------------------------- */
  --a8-radius-xs: 4px;
  --a8-radius-sm: 6px;
  --a8-radius-md: 8px;
  --a8-radius-lg: 10px;
  --a8-radius-xl: 12px;
  --a8-radius-2xl: 16px;
  --a8-radius-3xl: 20px;
  --a8-radius-full: 9999px;

  /* ---- Type ---------------------------------------------------------------- */
  /* Serif is limited to legal-document content, never to UI chrome. */
  --a8-font-sans: var(--font-geist-sans, "Geist"), -apple-system,
    BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --a8-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --a8-font-mono: var(--font-geist-mono, "Geist Mono"), ui-monospace, "SF Mono",
    SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Motion --------------------------------------------------------------- */
  --a8-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --a8-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --a8-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --a8-duration-fast: 120ms;
  --a8-duration-base: 160ms;
  --a8-duration-slow: 220ms;
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;

  --a8-canvas: #121110;
  --a8-surface: #1b1a18;
  --a8-surface-hover: #24231f;
  --a8-sunken: #201f1c;
  --a8-sidebar: #161514;
  --a8-overlay: rgba(0, 0, 0, 0.55);

  --a8-text-primary: #f5f4f2;
  --a8-text-secondary: #a8a5a0;
  --a8-text-tertiary: #7d7a75;
  --a8-text-placeholder: #5a5854;
  --a8-text-inverse: #0d0b0a;
  --a8-text-on-ink: #ffffff;

  /* On ink grounds the structural primary inverts to paper. */
  --a8-primary: #f5f4f2;
  --a8-primary-hover: #ffffff;
  --a8-primary-active: #e4e2df;
  --a8-primary-fg: #0d0b0a;

  /* Oxblood lifts so it stays legible on ink — 5.8:1 on canvas. */
  --a8-accent: #e0687d;
  --a8-accent-rgb: 224 104 125;
  --a8-accent-hover: #ea8194;
  --a8-accent-active: #f29bab;
  --a8-accent-fg: #240407;
  --a8-accent-soft: rgba(224, 104, 125, 0.16);
  --a8-accent-soft-hover: rgba(224, 104, 125, 0.24);
  --a8-accent-border: rgba(224, 104, 125, 0.35);

  --a8-success: #3ecf8e;
  --a8-success-soft: rgba(62, 207, 142, 0.15);
  --a8-warning: #e5920b;
  --a8-warning-soft: rgba(229, 146, 11, 0.15);
  --a8-danger: #f2555a;
  --a8-danger-strong: #f2555a;
  --a8-danger-hover: #f56e72;
  --a8-danger-soft: rgba(242, 85, 90, 0.16);
  --a8-info: #6da3d8;
  --a8-info-soft: rgba(109, 163, 216, 0.15);

  --a8-border-subtle: rgba(255, 255, 255, 0.07);
  --a8-border: rgba(255, 255, 255, 0.11);
  --a8-border-strong: rgba(255, 255, 255, 0.18);

  --a8-hover: rgba(255, 255, 255, 0.05);
  --a8-active: rgba(255, 255, 255, 0.09);
  --a8-selected: var(--a8-accent-soft);
  --a8-focus-ring: rgba(224, 104, 125, 0.45);
  --a8-focus-ring-ink: rgba(255, 255, 255, 0.28);

  --a8-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --a8-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --a8-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
  --a8-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --a8-shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --a8-duration-fast: 0ms;
    --a8-duration-base: 0ms;
    --a8-duration-slow: 0ms;
  }
}

/* Component contracts introduced by the desktop UI port. */
:root {
  --a8-asset-back: var(--a8-gray-200);
  --a8-asset-edge: var(--a8-border-strong);
  --a8-asset-front: var(--a8-gray-100);
  --a8-chrome: var(--a8-sidebar);
  --a8-control-lg: 44px;
  --a8-control-md: 36px;
  --a8-control-sm: 28px;
  --a8-duration-enter: 420ms;
  --a8-font-content: var(--a8-font-sans);
  --a8-glass: var(--a8-surface);
  --a8-glass-blur: 0px;
  --a8-glass-highlight: var(--a8-border-subtle);
  --a8-glass-strong: var(--a8-surface);
  --a8-panel-toolbar-height: 3rem;
  --a8-search-glass: var(--a8-surface);
  --a8-search-glass-blur: 0px;
  --a8-search-glass-input: var(--a8-surface);
  --a8-search-glass-muted: var(--a8-text-secondary);
  --a8-search-glass-shadow: var(--a8-shadow-lg);
  --a8-search-glass-solid: var(--a8-sunken);
  --a8-search-glass-text: var(--a8-text-primary);
  --a8-search-overlay: var(--a8-overlay);
  --a8-space-1: 4px;
  --a8-space-2: 8px;
  --a8-space-3: 12px;
  --a8-space-4: 16px;
  --a8-space-5: 20px;
  --a8-space-6: 24px;
  --a8-space-8: 32px;
  --a8-text-content: var(--a8-text-primary);
}

[data-appearance="blackout"] {
  --a8-canvas: var(--a8-ink-deep);
  --a8-surface: var(--a8-ink);
  --a8-sidebar: var(--a8-ink-deep);
  --a8-sunken: var(--a8-gray-900);
}

@media (prefers-reduced-motion: reduce) {
  :root { --a8-duration-enter: 0ms; }
}