/*
 * Crown & Rose — Design System Stylesheet v1
 * Source of truth: /app/docs/crown-rose-theme-framework.md
 *
 * Usage:
 *   <link rel="stylesheet" href="/api/theme/crown-rose-theme.css?v=2">
 *   @import url('/api/theme/crown-rose-theme.css');
 */

/* ── Google Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* ── Tokens ────────────────────────────────────────────────────────────────── */
:root {
  /* Page */
  --cr-page:            #FCFBFA;
  --cr-surface:         #F4EFE9;
  --cr-border:          #E8E0D8;

  /* Text */
  --cr-text:            #2B2321;
  --cr-text-soft:       #5C4A45;
  --cr-text-muted:      #9C8880;

  /* Orange accent */
  --cr-orange-deep:     #E57A1C;
  --cr-orange:          #F7A04B;
  --cr-orange-soft:     #FBC48E;
  --cr-orange-pale:     #FDE7D3;

  /* Status (reserved — never repurpose) */
  --cr-success:         #2E7D50;
  --cr-success-bg:      #EAF5EE;
  --cr-warning:         #C07A10;
  --cr-warning-bg:      #FEF4E2;
  --cr-error:           #B53030;
  --cr-error-bg:        #FDECEC;
  --cr-info:            #1C5A8E;
  --cr-info-bg:         #E6EFF8;

  /* Dark surfaces */
  --cr-dark-bg:         #1C1411;
  --cr-dark-surface:    #2E2320;
  --cr-dark-text:       #F0EBE5;
  --cr-dark-text-soft:  #C4B5AD;

  /* Spacing grid (8 px base) */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-8:  64px;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Typography */
  --font-serif:  'Fraunces', Georgia, serif;
  --font-sans:   'DM Sans', system-ui, sans-serif;
  --font-mono:   'DM Mono', 'Courier New', monospace;

  /* Shadow */
  --shadow-sm:   0 1px 3px rgba(43,35,33,.08), 0 1px 2px rgba(43,35,33,.06);
  --shadow-md:   0 4px 12px rgba(43,35,33,.10), 0 2px 4px rgba(43,35,33,.06);
  --shadow-lg:   0 8px 24px rgba(43,35,33,.12), 0 4px 8px rgba(43,35,33,.06);
}

/* ── Base reset ────────────────────────────────────────────────────────────── */
.cr-root, .cr-root * { box-sizing: border-box; }
.cr-root {
  background: var(--cr-page);
  color:      var(--cr-text);
  font-family: var(--font-sans);
  font-size:   16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Type scale ────────────────────────────────────────────────────────────── */
.cr-h1 {
  font-family: var(--font-serif);
  font-size: 2.5rem; font-weight: 700; line-height: 1.15;
  color: var(--cr-text); margin: 0;
}
.cr-h2 {
  font-family: var(--font-serif);
  font-size: 1.75rem; font-weight: 600; line-height: 1.25;
  color: var(--cr-text); margin: 0;
}
.cr-h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem; font-weight: 600; line-height: 1.35;
  color: var(--cr-text); margin: 0;
}
.cr-body    { font-family: var(--font-sans); font-size: 1rem;      line-height: 1.6; }
.cr-body-sm { font-family: var(--font-sans); font-size: .875rem;   line-height: 1.5; color: var(--cr-text-soft); }
.cr-label   {
  font-family: var(--font-sans); font-size: .75rem;
  font-weight: 600; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase;
}
.cr-mono    { font-family: var(--font-mono); font-size: .8125rem; line-height: 1.5; }

/* ── Links ─────────────────────────────────────────────────────────────────── */
a.cr-link, .cr-link {
  color: var(--cr-orange-deep);
  text-decoration: none;
  transition: opacity .15s;
}
a.cr-link:hover, .cr-link:hover { text-decoration: underline; opacity: .85; }

.cr-link-cta {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--cr-orange-deep); font-weight: 600; font-size: .9375rem;
  text-decoration: none;
  transition: gap .15s;
}
.cr-link-cta::after { content: '→'; }
.cr-link-cta:hover  { gap: 8px; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.cr-btn, .cr-btn-secondary, .cr-btn-ghost, .cr-btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-1);
  min-height: 44px; padding: 10px 20px;
  border: 2px solid transparent; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: .9375rem; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, opacity .15s, box-shadow .15s;
  outline-offset: 2px;
}
.cr-btn:focus-visible,
.cr-btn-secondary:focus-visible,
.cr-btn-ghost:focus-visible,
.cr-btn-danger:focus-visible {
  outline: 2px solid var(--cr-orange-deep);
}

/* Primary */
.cr-btn {
  background: var(--cr-orange);
  color: var(--cr-text);
  border-color: var(--cr-orange);
}
.cr-btn:hover { background: var(--cr-orange-deep); border-color: var(--cr-orange-deep); color: #fff; }

/* Secondary */
.cr-btn-secondary {
  background: var(--cr-orange-soft);
  color: var(--cr-text);
  border-color: var(--cr-orange-soft);
}
.cr-btn-secondary:hover { background: var(--cr-orange); border-color: var(--cr-orange); }

/* Ghost */
.cr-btn-ghost {
  background: transparent;
  color: var(--cr-orange-deep);
  border-color: var(--cr-orange-deep);
}
.cr-btn-ghost:hover { background: var(--cr-orange-pale); }

/* Danger */
.cr-btn-danger {
  background: var(--cr-error);
  color: #fff;
  border-color: var(--cr-error);
}
.cr-btn-danger:hover { opacity: .88; }

/* Disabled */
.cr-btn:disabled, .cr-btn-secondary:disabled,
.cr-btn-ghost:disabled, .cr-btn-danger:disabled {
  opacity: .4; cursor: not-allowed; pointer-events: none;
}

/* Pill modifier */
.cr-btn.pill, .cr-btn-secondary.pill,
.cr-btn-ghost.pill, .cr-btn-danger.pill { border-radius: var(--radius-pill); }

/* Small modifier */
.cr-btn.sm, .cr-btn-secondary.sm,
.cr-btn-ghost.sm, .cr-btn-danger.sm {
  min-height: 36px; padding: 6px 14px; font-size: .875rem;
}

/* ── Badges ────────────────────────────────────────────────────────────────── */
.cr-badge, .cr-badge-success, .cr-badge-warning,
.cr-badge-error, .cr-badge-info, .cr-badge-neutral {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: .75rem;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.cr-badge         { background: var(--cr-orange-pale); color: var(--cr-orange-deep); }
.cr-badge-success { background: var(--cr-success-bg);  color: var(--cr-success); }
.cr-badge-warning { background: var(--cr-warning-bg);  color: var(--cr-warning); }
.cr-badge-error   { background: var(--cr-error-bg);    color: var(--cr-error); }
.cr-badge-info    { background: var(--cr-info-bg);     color: var(--cr-info); }
.cr-badge-neutral { background: var(--cr-surface);     color: var(--cr-text-muted); }

/* ── Chips ─────────────────────────────────────────────────────────────────── */
.cr-chip {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 32px; padding: 4px 12px;
  background: var(--cr-surface);
  border: 1.5px solid var(--cr-border);
  border-radius: var(--radius-pill);
  color: var(--cr-text-soft);
  font-size: .875rem; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.cr-chip:hover {
  border-color: var(--cr-orange-soft);
  color: var(--cr-text);
}
.cr-chip.active {
  background: var(--cr-orange-pale);
  border-color: var(--cr-orange-deep);
  color: var(--cr-orange-deep);
  font-weight: 600;
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.cr-card {
  background: var(--cr-page);
  border: 1px solid var(--cr-border);
  border-radius: var(--radius-md);
  padding: var(--sp-2);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.cr-card:hover {
  border-color: var(--cr-orange-soft);
  box-shadow: var(--shadow-md);
}
.cr-card-dark {
  background: var(--cr-dark-surface);
  border-radius: var(--radius-md);
  padding: var(--sp-2);
  color: var(--cr-dark-text);
  box-shadow: var(--shadow-md);
}

/* ── Inputs ────────────────────────────────────────────────────────────────── */
.cr-input {
  width: 100%; min-height: 44px;
  padding: 10px 14px;
  background: var(--cr-surface);
  border: 1.5px solid var(--cr-border);
  border-radius: var(--radius-md);
  color: var(--cr-text);
  font-family: var(--font-sans); font-size: 1rem;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.cr-input::placeholder { color: var(--cr-text-muted); }
.cr-input:focus {
  border-color: var(--cr-orange-deep);
  box-shadow: 0 0 0 3px var(--cr-orange-pale);
}

/* ── Divider ───────────────────────────────────────────────────────────────── */
.cr-divider {
  border: none;
  border-top: 1px solid var(--cr-border);
  margin: var(--sp-3) 0;
}

/* ── Dark section wrapper ──────────────────────────────────────────────────── */
.cr-dark {
  background: var(--cr-dark-bg);
  color: var(--cr-dark-text);
}
.cr-dark .cr-h1, .cr-dark .cr-h2, .cr-dark .cr-h3 { color: var(--cr-dark-text); }
.cr-dark .cr-body-sm { color: var(--cr-dark-text-soft); }
.cr-dark a.cr-link   { color: var(--cr-orange-soft); }