/* ==========================================================================
   Phemighty Concept — design tokens (v1.3 bright)
   Type: Supreme (Indian Type Foundry), self-hosted, free for commercial use.
   Colour: white and light blue-grey surfaces, navy type, royal blue + orange.
   ========================================================================== */

/* v1.3: Supreme throughout — Indian Type Foundry, ITF Free Font License (commercial use allowed) */
@font-face { font-family: "Supreme"; src: url("../fonts/supreme-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Supreme"; src: url("../fonts/supreme-500.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Supreme"; src: url("../fonts/supreme-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Supreme"; src: url("../fonts/supreme-800.woff2") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }

:root {
  --font-display: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Supreme", "Helvetica Neue", Helvetica, Arial, sans-serif; /* no monospace anywhere */
  --display-weight: 800;
  --display-track: -0.025em;

  /* Bright and bold: white pages, deep navy type, royal blue actions, orange highlights */
  --paper: #FFFFFF;
  --paper-2: #F3F6FC;
  --paper-3: #E7EDF8;
  --raised: #FFFFFF;

  --ink: #0B1F3A;
  --ink-2: #263A57;
  --ink-3: #4F5E77;
  --ink-4: #66748C;

  --line: #E2E8F2;
  --line-2: #CBD5E4;

  --primary: #1D4ED8;
  --primary-2: #1E40AF;
  --primary-bg: #E8EFFE;
  --accent: #D9480F;
  --accent-2: #C2410C;
  --accent-bg: #FFF0E8;

  --inverse: #0B1F3A;
  --on-inverse: #FFFFFF;
  --on-inverse-2: #B9C6DC;
  --inverse-line: #24395A;

  --scrim: rgba(255, 255, 255, 0.92);
  --logo-2: #66748C;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(11, 31, 58, 0.06), 0 8px 24px -12px rgba(11, 31, 58, 0.14);
  --shadow-lg: 0 24px 60px -24px rgba(11, 31, 58, 0.28);

  /* Functional status — only inside booking and admin */
  --ok: #047857;   --ok-bg: #E3F6EE;
  --warn: #B45309; --warn-bg: #FEF3E2;
  --err: #C81E1E;  --err-bg: #FDECEC;
  --info: #1D4ED8; --info-bg: #E8EFFE;

  /* Space */
  --gutter: clamp(1rem, 0.5rem + 1.6vw, 2rem);
  --margin: clamp(1.25rem, 0.2rem + 4vw, 4.5rem);
  --section: clamp(5rem, 2.5rem + 9vw, 12rem);
  --maxw: 1600px;
  --header-h: 84px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 160ms;
  --dur-2: 360ms;
  --dur-3: 900ms;

  color-scheme: light;
}

[data-theme="dark"] {
  --paper: #0B1424;
  --paper-2: #0F1A2E;
  --paper-3: #16233B;
  --raised: #111D33;

  --ink: #EEF3FB;
  --ink-2: #CBD5E4;
  --ink-3: #9AA8C0;
  --ink-4: #7C8AA3;

  --line: #1F2E48;
  --line-2: #2C3D5C;

  --primary: #3B82F6;
  --primary-2: #2563EB;
  --primary-bg: #13264A;
  --accent: #F97316;
  --accent-2: #EA580C;
  --accent-bg: #3A1D0C;

  --inverse: #EEF3FB;
  --on-inverse: #0B1F3A;
  --on-inverse-2: #4F5E77;
  --inverse-line: #CBD5E4;

  --scrim: rgba(11, 20, 36, 0.92);
  --logo-2: #9AA8C0;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.6);

  --ok: #6EE7B7;   --ok-bg: #0E2A22;
  --warn: #FBBF24; --warn-bg: #2E2410;
  --err: #FCA5A5;  --err-bg: #331617;
  --info: #93C5FD; --info-bg: #13264A;

  color-scheme: dark;
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
}