/* Base Styles
 * Global typography, layout primitives, and foundational element rules.
 * Reconciled against ~/Downloads/Drape Design System/colors_and_type.css. */

@layer base {
  /* Box-sizing reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    font-family: var(--font-sans);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
  }

  body {
    margin: 0;
    font-size: var(--text-md);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: var(--fg);
    background-color: var(--surface-sunken);
  }

  /* Headings — display family, tight tracking, bold by default */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    color: var(--fg);
    margin: 0 0 var(--space-4);
  }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }

  h4,
  h5,
  h6 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semi);
    letter-spacing: 0;
  }

  p {
    margin: 0 0 var(--space-4);
  }

  /* Links */
  a {
    color: var(--brand);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  a:hover {
    color: var(--brand-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-1);
  }

  /* Code — inherits --fg, not red */
  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-mono);
    font-size: 0.92em;
  }

  code {
    background-color: var(--surface-sunken);
    border: 1px solid var(--border);
    padding: 0.08em 0.32em;
    border-radius: var(--radius-1);
    color: inherit;
  }

  pre {
    background-color: var(--surface-sunken);
    border: 1px solid var(--border);
    padding: var(--space-4);
    border-radius: var(--radius-2);
    overflow-x: auto;
    line-height: var(--leading-tight);
  }

  pre code {
    background-color: transparent;
    border: 0;
    padding: 0;
    color: inherit;
  }

  /* Bare-code modifier — opt out of the global background+border for inline code
     inside dense UI (alerts, table cells, mock terminals). Cleaner than
     resetting per call site. */
  .code--bare,
  code.bare {
    background: transparent;
    border: 0;
    padding: 0;
  }

  strong,
  b { font-weight: var(--weight-bold); }

  em,
  i { font-style: italic; }

  small { font-size: var(--text-xs); }

  /* Lists */
  ul,
  ol {
    padding-left: var(--space-5);
    margin: 0 0 var(--space-4);
  }

  li {
    margin-bottom: var(--space-2);
  }

  /* Horizontal rule */
  hr {
    border: none;
    border-top: 1px solid var(--neutral-200);
    margin: var(--space-6) 0;
  }

  /* Global focus-visible — only fires on keyboard navigation */
  *:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }

  /* Selection */
  ::selection {
    background-color: var(--brand-soft);
    color: var(--fg);
  }

  /* Webkit scrollbar */
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-track {
    background-color: var(--surface-sunken);
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--neutral-400);
    border-radius: var(--radius-pill);
    border: 3px solid var(--surface-sunken);
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--neutral-600);
  }

  /* ============================================================================
   * Utility classes from the new design system. Single declaration; no kit.css
   * shadow. (.text-* utilities live in utilities.css alongside the existing
   * u-text-* system; not duplicated here.)
   * ============================================================================ */

  .eyebrow {
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--brand);
  }
  .eyebrow--accent { color: var(--accent); }
  .eyebrow--muted  { color: var(--fg-muted); }

  .label {
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
  }

  .tabular {
    font-variant-numeric: tabular-nums slashed-zero;
  }
}

/* ============================================================================
 * OKLCH browser-baseline banner.
 *
 * The single intentional hex in the cascade — outside @layer because it must
 * win regardless of cascade ordering, and `tokens.css` is meant to be hex-free.
 * Browsers older than Chrome 111 / Firefox 113 / Safari 16.4 see this; everyone
 * else sees nothing.
 * ============================================================================ */
@supports not (color: oklch(50% 0 0)) {
  body::before {
    content: "Your browser is older than Drape supports. Please upgrade to Chrome 111+, Firefox 113+, or Safari 16.4+.";
    display: block;
    padding: 1rem;
    background: #fee;
    color: #900;
    font-family: sans-serif;
    text-align: center;
  }
}