/* Boxshop design tokens — copied from King's Landing's classic theme
 * (kingslanding/app/frontend/src/styles/themes/classic.css).
 * Everything is verbatim except --font-display: Fraunces replaces the KL
 * display font per the boxshop.io rebuild spec.
 * Sub-project 3 formalizes this token contract across all brand sites. */

:root {
  /* Brand */
  --color-brand: #B8860B;
  --color-brand-hover: #996F09;
  --color-brand-subtle: #FDF6E3;
  --color-brand-text: #92680A;

  /* Backgrounds */
  --color-bg-base: #FAFAF7;
  --color-bg-raised: #FFFFFF;
  --color-bg-sunken: #F0EDE6;

  /* Text */
  --color-text-primary: #1C1917;
  --color-text-secondary: #57534E;
  --color-text-tertiary: #78716C;
  --color-text-on-brand: #FFFFFF;

  /* Borders */
  --color-border: #D5D0C4;
  --color-border-subtle: #E7E3DA;

  /* Semantic */
  --color-danger: #B91C1C;
  --color-danger-hover: #991B1B;
  --color-success: #15803D;
  --color-warning: #D97706;
  --color-info: #57534E;

  /* Surfaces */
  --color-surface-hover: #F5F3EE;
  --color-surface-active: #EBE8E0;

  /* Component tokens */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --border-width: 1px;
  --transition-speed: 150ms;
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
  --shadow-md: 0 4px 6px rgba(28, 25, 23, 0.07);
  --shadow-lg: 0 10px 15px rgba(28, 25, 23, 0.1);

  /* Typography */
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Fira Code', monospace;
}

.dark {
  --color-brand: #D4A843;
  --color-brand-hover: #E0BC5E;
  --color-brand-subtle: #1A1A2E;
  --color-brand-text: #D4A843;

  --color-bg-base: #0D1117;
  --color-bg-raised: #161B26;
  --color-bg-sunken: #0A0E18;

  --color-text-primary: #E8E4DC;
  --color-text-secondary: #A09B93;
  --color-text-tertiary: #78716C;
  --color-text-on-brand: #1C1917;

  --color-border: #2A2F3D;
  --color-border-subtle: #1E2330;

  --color-danger: #EF4444;
  --color-danger-hover: #DC2626;
  --color-success: #4ADE80;
  --color-warning: #FBBF24;
  --color-info: #A09B93;

  --color-surface-hover: #1C2233;
  --color-surface-active: #232A3B;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}