/*
 * DOCS Design System — tokens.css
 * ------------------------------------------------------------------
 * Standalone, dependency-free custom-property set for the DOCS look.
 * SNAPSHOT extracted VERBATIM from apps/web/app/globals.css in the
 * docs-rhrp repo (2026-07-21). No values invented.
 *
 * The living source of truth is apps/web/app/globals.css +
 * packages/tokens/src/index.ts in docs-rhrp. If they change, re-snapshot.
 *
 * WHAT THIS FILE CONTAINS
 *   1. :root brand tokens (neutrals, accents, radii, elevation)
 *   2. shadcn semantic aliases mapped ONTO the brand tokens
 *   3. Soft DOCS motion keyframes + utility classes
 *
 * WHAT WAS INTENTIONALLY DROPPED (app-specific, not portable):
 *   - `@import "tailwindcss"` / `tw-animate-css` / `shadcn/tailwind.css`
 *   - `@source "../../../packages/ui/src/**"` (workspace-relative)
 *   - `@theme inline { --color-* }` bridge — that block only maps these
 *     vars to Tailwind v4 utility names (bg-brand, text-ai, etc.). If your
 *     new app uses Tailwind v4, recreate that @theme block (see README);
 *     if you consume the vars as plain CSS, you don't need it.
 *
 * USAGE (plain CSS): `@import` or paste this file, then reference e.g.
 *   color: var(--ink); background: var(--brand);
 *
 * DARK VARIANT: the source app defines `@custom-variant dark (&:is(.dark *))`
 * in globals.css but ships NO dark token overrides — the palette is
 * light-only today. There is no `.dark { ... }` block to copy. Add one
 * downstream if/when a dark theme is designed.
 */

:root {
  /* Brand neutrals */
  --ink: #0f1014;
  --ink-2: #2a2c33;
  --muted-ink: #6f6b5e;
  --muted-ink-2: #a8a496;
  --muted-ink-3: #8a8676;
  --paper: #f4f1ea;
  --paper-2: #ece7db;
  --paper-soft: #f8f6f1;
  --card-bg: #ffffff;
  --line: #e6e2d7;
  --line-2: #d5d0c2;
  --hairline: #efebe0;

  /* Brand accents */
  --navy: #0e2e55;        /* DOCS navy — wordmark, headings */
  --navy-2: #1b4683;
  --navy-3: #1b3d7a;      /* Recruiter persona + Northeast region accent */
  --navy-tint: #e2e8f0;
  --brand: #e76424;       /* DOCS orange — primary CTA */
  --brand-2: #d45616;
  --brand-tint: #fbe5d5;
  --brand-on-dark: #f0a074; /* orange kickers on the navy hero */
  --ai: #5646e0;          /* AI signal violet (Soft DOCS 2026-07-09) */
  --ai-2: #6d5bff;
  --ai-tint: #ece9ff;
  --ok: #2e6f4a;
  --ok-tint: #e1ece5;
  --warn: #b5732b;
  --warn-tint: #f4e7d5;
  --bad: #8c2a2a;
  --bad-tint: #f3dedd;
  --gold: #b68a2c;

  /* shadcn-shape semantic tokens aliased onto the brand */
  --background: var(--paper);
  --foreground: var(--ink);
  --card: var(--card-bg);
  --card-foreground: var(--ink);
  --popover: var(--card-bg);
  --popover-foreground: var(--ink);
  --primary: var(--navy);
  --primary-foreground: var(--paper);
  --secondary: var(--paper-2);
  --secondary-foreground: var(--ink);
  --muted: var(--paper-2);
  --muted-foreground: var(--muted-ink);
  --accent: var(--ai-tint);
  --accent-foreground: var(--ai);
  --destructive: var(--bad);
  --border: var(--line);
  --input: var(--line);
  --ring: var(--navy-2);
  --sidebar: var(--paper);
  --sidebar-foreground: var(--ink);
  --sidebar-primary: var(--navy);
  --sidebar-primary-foreground: var(--paper);
  --sidebar-accent: var(--paper-2);
  --sidebar-accent-foreground: var(--ink);
  --sidebar-border: var(--line);
  --sidebar-ring: var(--navy-2);

  /* Radii */
  --radius: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Soft DOCS surface radii (2026-07-09 redesign) */
  --radius-tile: 12px;
  --radius-bubble: 16px;
  --radius-row: 18px;
  --radius-card: 20px;
  --radius-shell: 26px;

  /* Soft DOCS elevation — navy-tinted, replaces borders on floating surfaces */
  --shadow-soft-chip: 0 4px 14px rgba(14, 46, 85, 0.06);
  --shadow-soft-row: 0 6px 20px rgba(14, 46, 85, 0.05);
  --shadow-soft-card: 0 10px 30px rgba(14, 46, 85, 0.06);
  --shadow-soft-hover: 0 12px 32px rgba(14, 46, 85, 0.1);
  --shadow-cta-glow: 0 10px 24px rgba(231, 100, 36, 0.3);
  --shadow-cta-glow-hover: 0 14px 30px rgba(231, 100, 36, 0.4);
}

/*
 * Soft DOCS motion. In globals.css these live under `@layer utilities`; the
 * @layer wrapper is preserved so downstream cascade ordering matches. If your
 * project has no `utilities` layer declared, this still works — an unknown
 * @layer name just creates one.
 */
@layer utilities {
  /* Soft DOCS entrance — cards fade up on mount; stagger via inline
     animation-delay (i * 0.05s). Respects reduced-motion. */
  @keyframes soft-fade-up {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes soft-grow-bar {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  .soft-fade-up {
    animation: soft-fade-up 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  .soft-grow-bar {
    transform-origin: left;
    animation: soft-grow-bar 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }

  @media (prefers-reduced-motion: reduce) {
    .soft-fade-up,
    .soft-grow-bar {
      animation: none;
    }
  }
}

/*
 * Base element defaults (from globals.css `@layer base`). Optional — include
 * if you want the same document baseline. Font families reference the
 * --font-* vars your app must define (see README > Fonts).
 */
@layer base {
  html,
  body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }

  body {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: -0.005em;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button {
    font-family: inherit;
    cursor: pointer;
  }

  * {
    border-color: var(--border);
  }
}