/* =============================================================
   Okala Design System — colors_and_type.css
   Core design tokens: fonts, colors (light + dark), type styles,
   spacing, radii, shadows, motion.
   ============================================================= */

/* ---------------- Fonts ---------------- */
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('fonts/Roboto-Condensed.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto Condensed';
  src: url('fonts/Roboto-BoldCondensed.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------------- Tokens: Light (default) ---------------- */
:root {
  /* Brand — Okala Blue (deeper, warmer sky-blue) */
  --brand-50:  #f0f9ff;
  --brand-100: #e0f2fe;
  --brand-200: #bae6fd;
  --brand-300: #7dd3fc;
  --brand-400: #38bdf8;
  --brand-500: #0ea5e9;  /* primary */
  --brand-600: #0284c7;
  --brand-700: #0369a1;
  --brand-800: #075985;
  --brand-900: #0c4a6e;

  /* Accent — warm orange, harmonizes with cool blue */
  --accent-50:  #fff7ed;
  --accent-100: #ffedd5;
  --accent-500: #f97316;
  --accent-600: #ea580c;
  --accent-700: #c2410c;

  /* Brand alias */
  --brand: var(--brand-500);
  --brand-hover: var(--brand-600);
  --brand-press: var(--brand-700);
  --brand-soft:  var(--brand-50);

  /* Neutrals — warm-cool gray (Airbnb-leaning) */
  --gray-0:   #ffffff;
  --gray-25:  #fafbfc;
  --gray-50:  #f5f7fa;
  --gray-100: #eceff3;
  --gray-200: #dde2e9;
  --gray-300: #c2c9d2;
  --gray-400: #9aa3ae;
  --gray-500: #6b7380;
  --gray-600: #4a525e;
  --gray-700: #333a44;
  --gray-800: #1f252d;
  --gray-900: #11161c;

  /* Semantic — foreground */
  --fg-1: var(--gray-900);   /* strongest text, headlines */
  --fg-2: var(--gray-700);   /* body */
  --fg-3: var(--gray-500);   /* secondary/meta */
  --fg-4: var(--gray-400);   /* placeholder, disabled */
  --fg-inverse: #ffffff;
  --fg-brand:   var(--brand-600);

  /* Semantic — background */
  --bg-0:   var(--gray-0);    /* card/surface */
  --bg-1:   var(--gray-25);   /* page */
  --bg-2:   var(--gray-50);   /* subtle region */
  --bg-3:   var(--gray-100);  /* hover row */
  --bg-overlay: rgba(17, 22, 28, 0.48);

  /* Borders */
  --border-1: var(--gray-200);    /* default divider */
  --border-2: var(--gray-300);    /* input border */
  --border-strong: var(--gray-400);
  --border-brand: var(--brand-500);

  /* Semantic — status */
  --success-50:  #ecfdf5;
  --success-500: #10b981;
  --success-700: #047857;

  --warning-50:  #fffbeb;
  --warning-500: #f59e0b;
  --warning-700: #b45309;

  --danger-50:   #fef2f2;
  --danger-500:  #ef4444;
  --danger-700:  #b91c1c;

  --info-50:     #eff6ff;
  --info-500:    #3b82f6;
  --info-700:    #1d4ed8;

  /* Room status (domain-specific) */
  --room-available: #10b981;  /* green */
  --room-occupied:  #0ea5e9;  /* brand blue */
  --room-cleaning:  #f59e0b;  /* amber */
  --room-dirty:     #6b7380;  /* gray */
  --room-oos:       #ef4444;  /* red — out of service */

  /* ---- Typography ---- */
  --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Roboto', system-ui, sans-serif;
  --font-condensed: 'Roboto Condensed', 'Roboto', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (px) */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  34px;
  --fs-4xl:  44px;
  --fs-5xl:  56px;

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-wide:   0.04em;

  /* ---- Spacing (4px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Radii ---- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadows (light, Airbnb-style) ---- */
  --shadow-xs: 0 1px 2px rgba(17, 22, 28, 0.05);
  --shadow-sm: 0 1px 3px rgba(17, 22, 28, 0.06), 0 1px 2px rgba(17, 22, 28, 0.04);
  --shadow-md: 0 4px 12px rgba(17, 22, 28, 0.07), 0 1px 3px rgba(17, 22, 28, 0.04);
  --shadow-lg: 0 12px 28px rgba(17, 22, 28, 0.10), 0 2px 6px rgba(17, 22, 28, 0.05);
  --shadow-xl: 0 24px 48px rgba(17, 22, 28, 0.14), 0 4px 10px rgba(17, 22, 28, 0.06);
  --shadow-focus: 0 0 0 3px rgba(14, 165, 233, 0.35);
  --shadow-inner: inset 0 1px 2px rgba(17, 22, 28, 0.05);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* ---- Hit targets ---- */
  --hit-min: 44px;        /* mobile minimum */
  --control-h-sm: 36px;
  --control-h-md: 44px;   /* default — generous */
  --control-h-lg: 52px;
}

/* ---------------- Dark mode ---------------- */
:root[data-theme="dark"],
.theme-dark {
  --fg-1: #f3f5f8;
  --fg-2: #c8cdd6;
  --fg-3: #8e96a4;
  --fg-4: #5b6371;
  --fg-inverse: #0b0f14;
  --fg-brand:   #60a5fa;

  --bg-0: #161b22;    /* card surface */
  --bg-1: #0d1117;    /* page */
  --bg-2: #1c222b;    /* subtle region */
  --bg-3: #242b36;    /* hover row */
  --bg-overlay: rgba(0, 0, 0, 0.64);

  --border-1: #242b36;
  --border-2: #2e3644;
  --border-strong: #3d4758;
  --border-brand: #60a5fa;

  --brand: #3b82f6;
  --brand-hover: #2f7bff;
  --brand-press: #1f66e5;
  --brand-soft: rgba(59, 130, 246, 0.12);

  --success-50:  rgba(16, 185, 129, 0.14);
  --warning-50:  rgba(245, 158, 11, 0.14);
  --danger-50:   rgba(239, 68, 68, 0.14);
  --info-50:     rgba(59, 130, 246, 0.14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(0, 0, 0, 0.4);
  --shadow-focus: 0 0 0 3px rgba(56, 189, 248, 0.45);
}

/* ---------------- Base + semantic type ---------------- */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--fg-2);
  background: var(--bg-1);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
h2, .t-h2 {
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}
h3, .t-h3 {
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4, .t-h4 {
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p, .t-body {
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

.t-body-lg { font-size: var(--fs-md); line-height: var(--lh-normal); }
.t-small   { font-size: var(--fs-sm); color: var(--fg-3); }
.t-caption {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: 500;
}
.t-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-2);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: 0.94em;
}
.t-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

a {
  color: var(--fg-brand);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-hover); text-decoration: underline; }

*, *::before, *::after { box-sizing: border-box; }