/* ===================================
   Variables (PiratePLGame.com)
   Theme: adventurous, polished, nautical
   =================================== */
:root {
  /* Color scheme hint */
  color-scheme: dark;

  /* Core palette */
  --color-background: #0b1e33; /* Deep nautical navy */
  --color-surface: #102844;    /* Elevated surface */
  --color-surface-2: #0d223a;  /* Subtle contrast surface */
  --color-text: #e8eef6;       /* Soft light text */
  --color-text-muted: #b8c6d8; /* Muted text */

  --color-primary: #d4af37;    /* Polished gold */
  --color-primary-600: #caa12a; /* Hover/active variant */
  --color-primary-contrast: #0b1e33; /* Text over gold */

  --color-success: #2ea66e;
  --color-warning: #f0b429;
  --color-danger:  #d64545;

  /* Neutral grays (slate-leaning for nautical tone) */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1f2937;
  --gray-900: #0b1220;

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-serif: "Merriweather", Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --font-size-100: 0.875rem; /* 14px */
  --font-size-200: 1rem;     /* 16px */
  --font-size-300: 1.125rem; /* 18px */
  --font-size-400: 1.25rem;  /* 20px */
  --font-size-500: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); /* 22–28px */
  --font-size-600: clamp(1.75rem, 1.2rem + 2vw, 2.25rem);  /* 28–36px */
  --font-size-700: clamp(2rem, 1.2rem + 3vw, 3rem);        /* 32–48px */

  --line-height-base: 1.6;
  --line-height-heading: 1.2;

  /* Spacing scale (0–96px) */
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-96: 96px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows (subtle depth on dark backgrounds) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 14px 30px rgba(0, 0, 0, 0.45), 0 3px 8px rgba(0, 0, 0, 0.35);

  /* Transitions */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-250: 250ms;
  --duration-300: 300ms;

  /* Controls */
  --control-padding-y: 10px;
  --control-padding-x: 14px;
  --control-border: 1px solid rgba(255, 255, 255, 0.12);
  --control-border-focus: 1px solid rgba(212, 175, 55, 0.7);
}

/* Optional light theme hook (if needed) */
/*
:root[data-theme="light"] {
  color-scheme: light;
  --color-background: #f7fbff;
  --color-surface: #ffffff;
  --color-surface-2: #f2f6fb;
  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-primary: #b08c2a;
  --color-primary-600: #a07d21;
  --color-primary-contrast: #ffffff;
}
*/

/* ===================================
   Reset / Normalize
   =================================== */
*, *::before, *::after { box-sizing: border-box; }

html { 
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Remove default margins */
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }

/* Responsive media */
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

/* Form elements inherit fonts */
input, button, textarea, select { font: inherit; color: inherit; }

/* Remove built-in button styles */
button { background: none; border: 0; padding: 0; }

/* Smooth font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ===================================
   Base Styles
   =================================== */
body {
  min-height: 100dvh;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-200);
  line-height: var(--line-height-base);
  letter-spacing: 0.15px;
  accent-color: var(--color-primary);
}

/* Headings: scalable, controlled margins */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  line-height: var(--line-height-heading);
  font-weight: 700;
  color: var(--color-text);
}

h1 { font-size: var(--font-size-700); margin-block: var(--space-24) var(--space-16); }
h2 { font-size: var(--font-size-600); margin-block: var(--space-24) var(--space-12); }
h3 { font-size: var(--font-size-500); margin-block: var(--space-20) var(--space-12); }
h4 { font-size: var(--font-size-400); margin-block: var(--space-16) var(--space-8); }
h5 { font-size: var(--font-size-300); margin-block: var(--space-16) var(--space-8); }
h6 { font-size: var(--font-size-200); margin-block: var(--space-12) var(--space-8); }

/* Paragraphs: comfortable line length */
p { max-width: 75ch; margin-block: var(--space-12); }

/* Links: clean, gold-accented */
a { color: var(--color-primary); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-primary-600); text-decoration: underline; }
a:visited { color: var(--color-primary); }

/* Lists */
ul, ol { padding-left: 1.25rem; margin-block: var(--space-12); }
li { margin-block: 6px; }

/* Quotes */
blockquote {
  margin-block: var(--space-16);
  padding: var(--space-12) var(--space-16);
  border-left: 3px solid rgba(212, 175, 55, 0.7);
  background: linear-gradient(90deg, rgba(212,175,55,0.06), transparent);
  color: var(--color-text);
}

/* Code */
code, pre { font-family: var(--font-mono); font-size: 0.95em; }
pre { padding: var(--space-16); background: var(--color-surface-2); border-radius: var(--radius-md); overflow: auto; }

/* Selection */
::selection { background: rgba(212, 175, 55, 0.35); color: #fff; }

/* Accessibility: focus-visible */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ===================================
   Utilities
   =================================== */
.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
  padding-inline: 0; /* already accounted with width formula */
}

.prose { max-width: 75ch; }

/* Flex helpers */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-col { display: flex; flex-direction: column; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8 { gap: var(--space-8); }
.gap-16 { gap: var(--space-16); }
.gap-24 { gap: var(--space-24); }

/* Grid helpers */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-auto-flow: dense; }

/* Screen reader only */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Spacing utility (example minimal) */
.mt-24 { margin-top: var(--space-24); }
.mb-24 { margin-bottom: var(--space-24); }
.pt-24 { padding-top: var(--space-24); }
.pb-24 { padding-bottom: var(--space-24); }

/* ===================================
   Basic Components
   =================================== */
/* Buttons */
.btn {
  --_bg: var(--color-surface-2);
  --_fg: var(--color-text);
  --_bd: rgba(255, 255, 255, 0.14);

  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: calc(var(--control-padding-y) - 2px) calc(var(--control-padding-x) + 2px);
  background: var(--_bg);
  color: var(--_fg);
  border: 1px solid var(--_bd);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background var(--duration-150) var(--ease), color var(--duration-150) var(--ease), box-shadow var(--duration-150) var(--ease), transform var(--duration-100) var(--ease);
}

.btn:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

.btn-primary {
  --_bg: var(--color-primary);
  --_fg: var(--color-primary-contrast);
  --_bd: transparent;
}
.btn-primary:hover { background: var(--color-primary-600); }

.btn-outline {
  --_bg: transparent;
  --_fg: var(--color-primary);
  --_bd: rgba(212, 175, 55, 0.6);
}
.btn-outline:hover { background: rgba(212, 175, 55, 0.08); }

.btn-ghost {
  --_bg: transparent;
  --_fg: var(--color-text);
  --_bd: transparent;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); }

/* Inputs */
.input, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%;
  padding: var(--control-padding-y) var(--control-padding-x);
  background: var(--color-surface-2);
  color: var(--color-text);
  border: var(--control-border);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: border-color var(--duration-150) var(--ease), box-shadow var(--duration-150) var(--ease), background var(--duration-150) var(--ease);
}

.input::placeholder, input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 0.9; }

.input:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border: var(--control-border-focus);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.25);
}

input:disabled, select:disabled, textarea:disabled { opacity: 0.6; cursor: not-allowed; }

/* Cards */
.card {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-24);
}

.card-header { margin-bottom: var(--space-16); }
.card-footer { margin-top: var(--space-16); }

/* Badges (small accent labels) */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(212, 175, 55, 0.18);
  color: var(--color-primary);
  border: 1px solid rgba(212, 175, 55, 0.35);
  font-size: 0.85em;
}

/* Tables - minimal polish */
.table { width: 100%; border-collapse: separate; border-spacing: 0; }
.table th, .table td { padding: 12px 14px; text-align: left; }
.table thead th { background: var(--color-surface-2); color: var(--color-text); position: sticky; top: 0; z-index: 1; }
.table tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

/* Alerts */
.alert { padding: var(--space-16); border-radius: var(--radius-md); border: 1px solid transparent; }
.alert-success { background: rgba(46, 166, 110, 0.12); border-color: rgba(46, 166, 110, 0.4); color: #cbf2de; }
.alert-warning { background: rgba(240, 180, 41, 0.14); border-color: rgba(240, 180, 41, 0.45); color: #ffe8b3; }
.alert-danger  { background: rgba(214, 69, 69, 0.12); border-color: rgba(214, 69, 69, 0.45); color: #ffd3d3; }

/* ===================================
   Navigation affordances (minimal)
   =================================== */
.navbar {
  background: linear-gradient(180deg, rgba(13, 34, 58, 0.92), rgba(13, 34, 58, 0.8));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: saturate(1.2) blur(8px);
}
.navbar a { color: var(--color-text); }
.navbar a:hover { color: var(--color-primary); }

/* ===================================
   Forms: checkbox / radio
   =================================== */
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); }

/* ===================================
   Media helpers
   =================================== */
.figure { margin-block: var(--space-16); }
.figure img { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.caption { color: var(--color-text-muted); font-size: 0.9em; margin-top: 6px; }

/* ===================================
   Focus & interactive accessibility
   =================================== */
[role="button"], a[role="button"], button, .btn, input, select, textarea {
  -webkit-tap-highlight-color: rgba(212, 175, 55, 0.25);
}

/* ===================================
   Layout helpers
   =================================== */
.section { padding-block: var(--space-40); }
.section--xl { padding-block: var(--space-64); }

/* ===================================
   End
   =================================== */