/* theme.css — design tokens ONLY (CSS custom properties + @font-face).
 * Every visual decision lives here. app.css must reference these vars and
 * never hardcode hex, font names or pixel sizes. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/CormorantGaramond-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/CormorantGaramond-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/CormorantGaramond-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/Inter-SemiBold.woff2') format('woff2');
}

:root {
  /* ===== COLOR PALETTE ===== */
  --color-bg:               #0a0708;
  --color-surface:          #161114;
  --color-surface-elev:     #1f1719;
  --color-surface-overlay:  rgba(10, 7, 8, 0.85);

  --color-text:             #ede4dd;
  --color-text-muted:       #9c8a83;
  --color-text-subtle:      #5a4d48;

  --color-accent:           #b8860b;
  --color-accent-hover:     #d4a017;
  --color-accent-soft:      rgba(184, 134, 11, 0.15);

  --color-danger:           #8b2635;
  --color-danger-hover:     #a83341;
  --color-success:          #4a6741;

  --color-border:           rgba(237, 228, 221, 0.08);
  --color-border-strong:    rgba(237, 228, 221, 0.16);

  /* ===== TYPOGRAPHY ===== */
  --font-display:           'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body:              'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:              ui-monospace, 'SF Mono', Menlo, monospace;

  --font-size-xs:           0.75rem;
  --font-size-sm:           0.875rem;
  --font-size-base:         1rem;
  --font-size-lg:           1.125rem;
  --font-size-xl:           1.5rem;
  --font-size-2xl:          2.25rem;
  --font-size-display:      3.5rem;

  --font-weight-normal:     400;
  --font-weight-medium:     500;
  --font-weight-bold:       600;

  --line-height-tight:      1.15;
  --line-height-normal:     1.55;
  --line-height-loose:      1.8;

  --letter-spacing-tight:   -0.02em;
  --letter-spacing-wide:    0.05em;

  /* ===== SPACING ===== */
  --space-1:    0.25rem;
  --space-2:    0.5rem;
  --space-3:    0.75rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-16:   4rem;
  --space-20:   5rem;

  /* ===== RADII ===== */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  9999px;

  /* ===== SHADOWS ===== */
  --shadow-sm:      0 2px 8px rgba(0,0,0,0.3);
  --shadow-card:    0 4px 24px rgba(0,0,0,0.4);
  --shadow-hover:   0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow:    0 0 24px rgba(184, 134, 11, 0.2);

  /* ===== TRANSITIONS ===== */
  --transition-fast:    150ms ease-out;
  --transition-normal:  250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:    400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== LAYOUT ===== */
  --container-max:      1200px;
  --card-aspect:        3 / 4;
  --image-aspect:       2 / 3;

  /* ===== STRUCTURAL (so app.css needs no raw units) ===== */
  --border-hairline:    1px;
  --grid-min:           260px;
  --checkbox-size:      24px;
  --dot-size:           10px;
  --focus-ring:         0 0 0 3px var(--color-accent-soft);
  /* Native date/time picker icon: brighten + tint toward the gold accent so
     it stands out on the dark surface and reads as clickable. */
  --calendar-icon-filter: invert(72%) sepia(38%) saturate(560%) hue-rotate(2deg) brightness(92%);
  --bg-gradient:        radial-gradient(circle at 50% 0%, rgba(184,134,11,0.06), transparent 60%);
  --banner-gradient:    linear-gradient(135deg, var(--color-accent-soft), transparent 70%);
  --check-mark:         url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0708' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-10'/></svg>");
  --banner-aspect:      16 / 5;       /* dashboard hero banner */
  --lightbox-bg:        rgba(0, 0, 0, 0.92);
  --lightbox-z:         1000;

  /* Site header (narrow "sexy" banner under the menu). The whole image is
     always shown: the box uses the image's exact aspect and scales with the
     viewport, so there is never a cropped/peeking edge. */
  --header-aspect:      1600 / 360;
  --header-max-h:       none;
  --topbar-wrap:        nowrap;
  --topbar-justify:     space-between;
  --gif-max-height:     70vh;

  /* Navigation: desktop = inline row, no hamburger. */
  --nav-toggle-display: none;
  --nav-menu-display:   flex;
  --nav-menu-dir:       row;
  --nav-menu-pos:       static;
  --nav-z:              50;
}

/* ===== RESPONSIVE (tokens only; keeps app.css free of raw px) ===== */
@media (max-width: 48rem) {
  :root {
    --topbar-wrap:       wrap;
    --topbar-justify:    space-between;
    --font-size-display: 2.5rem;
    --font-size-2xl:     1.75rem;
    --grid-min:          150px;
    --container-pad:     var(--space-4);
    /* Mobile: hamburger shown, menu collapsed into a dropdown column. */
    --nav-toggle-display: inline-flex;
    --nav-menu-display:   none;
    --nav-menu-dir:       column;
    --nav-menu-pos:       absolute;
  }
}
@media (min-width: 48.01rem) {
  :root { --container-pad: var(--space-6); }
}