/* AttorneyOS design tokens
 * Single source of truth for colour, space, type, radius, shadow, and motion.
 * Load AFTER layers.css and BEFORE app.css / marketing.css / ai.css.
 *
 * Cascade: @layer tokens (see layers.css).
 *
 * Token hierarchy inside this layer:
 *   1. Primitives  — raw values (prefer semantic tokens in components)
 *   2. Semantic    — role-based; firm brand overrides --aos-accent*
 *   3. Component   — optional high-traffic control defaults
 *   4. Aliases     — legacy names so existing CSS keeps working during migration
 */

@layer tokens {
  :root {
    /* ── Primitives: colour ── */
    --aos-blue-500: #1a73e8;
    --aos-blue-600: #1558b0;
    --aos-blue-700: #174ea6;
    --aos-green-500: #22c55e;
    --aos-green-700: #15803d;
    --aos-amber-500: #f59e0b;
    --aos-amber-700: #92660a;
    --aos-red-500: #ef4444;
    --aos-red-700: #b91c1c;

    --aos-gray-50: #f8fafd;
    --aos-gray-100: #f7f9fc;
    --aos-gray-200: #e5eaf3;
    --aos-gray-300: #d0d5dd;
    --aos-gray-400: #98a2b3;
    --aos-gray-500: #667085;
    --aos-gray-600: #5f6368;
    --aos-gray-700: #344054;
    --aos-gray-800: #202124;
    --aos-gray-900: #101828;

    --aos-white: #ffffff;

    /* ── Primitives: type ── */
    --aos-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --aos-font-display: "Fraunces", Georgia, "Times New Roman", serif;

    /* ── Semantic (themeable — firm brand sets --aos-accent*) ── */
    --aos-accent: var(--aos-blue-500);
    --aos-accent-strong: var(--aos-blue-600);
    --aos-accent-soft: color-mix(in srgb, var(--aos-accent) 12%, white);

    --aos-text: var(--aos-gray-900);
    --aos-text-muted: var(--aos-gray-500);
    --aos-surface: var(--aos-white);
    --aos-surface-muted: var(--aos-gray-50);
    --aos-border: #dadce0;
    --aos-bg: #f8f9fa;

    /* ── Status system (workspace redesign): fills ── */
    --aos-status-open: #5f6368;
    --aos-status-progress: #1a73e8;
    --aos-status-waiting: #f9ab00;
    --aos-status-waiting-ink: #3c2b00;
    --aos-status-court: #9334e6;
    --aos-status-done: #188038;
    --aos-status-urgent: #d93025;

    /* ── Status system: tints + their inks (chips, rails, alerts) ── */
    --aos-tint-blue: #e8f0fe;
    --aos-tint-blue-ink: #1558b0;
    --aos-tint-amber: #fef7e0;
    --aos-tint-amber-ink: #935a00; /* 5.3:1 on the amber tint — #a56300 was 4.47, under AA */
    --aos-tint-purple: #f3e8fd;
    --aos-tint-purple-ink: #7627bb;
    --aos-tint-red: #fce8e6;
    --aos-tint-red-ink: #c5221f;
    --aos-tint-green: #e6f4ea;
    --aos-tint-green-ink: #137333; /* Green 800 — 5.2:1 on the green tint; #188038 was 4.42 */
    --aos-tint-gray: #f1f3f4;

    --aos-success: var(--aos-green-500);
    --aos-success-text: var(--aos-green-700);
    --aos-warning: var(--aos-amber-500);
    --aos-warning-text: var(--aos-amber-700);
    --aos-danger: var(--aos-red-500);
    --aos-danger-text: var(--aos-red-700);

    /* ── Space (4px base) ── */
    --aos-space-1: 4px;
    --aos-space-2: 8px;
    --aos-space-3: 12px;
    --aos-space-4: 16px;
    --aos-space-5: 20px;
    --aos-space-6: 24px;
    --aos-space-8: 32px;
    --aos-space-10: 40px;

    /* ── Radius ── */
    --aos-radius-sm: 10px;
    --aos-radius-md: 14px;
    --aos-radius-lg: 18px;
    --aos-radius-xl: 24px;
    --aos-radius-pill: 999px;

    /* ── Type scale ── */
    --aos-text-xs: 12px;
    --aos-text-sm: 13px;
    --aos-text-md: 15px;
    --aos-text-lg: 18px;
    --aos-text-xl: clamp(1.5rem, 2.4vw, 2.1rem);
    --aos-text-display: clamp(2rem, 3vw, 3.2rem);

    /* ── Elevation ── */
    --aos-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 6px rgba(16, 24, 40, 0.04);
    --aos-shadow-md: 0 10px 28px rgba(16, 24, 40, 0.06);
    --aos-shadow-lg: 0 18px 42px rgba(16, 24, 40, 0.1);

    /* ── Motion ── */
    --aos-ease: 0.16s ease;
    --aos-ease-out: 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);

    /* ── Layout / controls ── */
    --aos-sidebar-width: 280px;
    --aos-content-max: 1680px;
    --aos-control-height: 46px;
    --aos-focus-ring: 2px solid var(--aos-accent);

    /* ── Component defaults ── */
    --aos-btn-height: var(--aos-control-height);
    --aos-btn-radius: var(--aos-radius-pill);
    --aos-btn-bg: linear-gradient(135deg, var(--aos-accent), var(--aos-accent-strong));
    --aos-btn-shadow: 0 10px 22px color-mix(in srgb, var(--aos-accent) 22%, transparent);
    --aos-panel-radius: var(--aos-radius-xl);
    --aos-panel-padding: var(--aos-space-5);
    --aos-panel-shadow: var(--aos-shadow-md);
    --aos-input-height: var(--aos-control-height);
    --aos-input-radius: var(--aos-radius-md);

    /* ── Legacy aliases (remove once app.css is fully migrated) ── */
    --blue: var(--aos-accent);
    --blue2: var(--aos-accent-strong);
    --ink: var(--aos-text);
    --muted: var(--aos-text-muted);
    --line: var(--aos-border);
    --soft: var(--aos-surface-muted);
    --white: var(--aos-white);
    --shadow: var(--aos-shadow-sm);

    --aos-blue: var(--aos-accent);
    --aos-blue-2: var(--aos-accent-strong);
    --aos-green: var(--aos-success);
    --aos-ink: var(--aos-text);
    --aos-muted: var(--aos-text-muted);
    --aos-line: var(--aos-border);
    --aos-soft: var(--aos-surface-muted);
    --aos-card: var(--aos-surface);

    --aos-app-bg: var(--aos-bg);
    --aos-app-line: var(--aos-border);
    --aos-app-card: var(--aos-surface);
    --aos-app-muted: var(--aos-text-muted);
  }
}