/* rooom Brand Theme – Colors & Typography
   This stylesheet overrides variables and base styles to match the brand guide.
   If you have the exact HEX values from the brand team, replace the placeholders below. */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Core palette from brand guide (adjust hex if needed) */
  --navy: #0B1220;            /* dark background */
  --deep-navy: #07101D;       /* cards bg */
  --graphite: #2A313E;        /* GRAPHITE */
  --teal: #00AEB3;            /* TURQUOISE */
  --turquoise-2: #00979C;     /* TURQUOISE_2 */
  --turquoise-3: #007B7E;     /* TURQUOISE_3 */
  --mustard: #EDA315;         /* MUSTARD-YELLOW */
  --border: #1f2a3a;          /* ui border */
  --focus: var(--teal);       /* focus ring color */
  --white: #ffffff;

  /* Optional radii/shadows remain as-is */
}

/* Typography */
html, body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }

h1, h2, h3, h4, .brand, .btn { font-family: "Montserrat", Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; letter-spacing: .2px; }

/* Buttons & interactive states use brand teal */
.btn-primary { box-shadow: none; }
.btn-primary:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 174, 179, .25); }

/* Links and subtle accents */
a { color: var(--teal); }
a:hover { opacity: .9; }

/* Logo usage: keep safe clear space around image */
.brand img[alt="rooom"] { display:inline-block; vertical-align:middle; margin-right:8px; }

/* Accessibility: consistent focus style */
.input:focus, button:focus, [role="button"]:focus { outline: none; box-shadow: 0 0 0 4px rgba(0,174,179,.18); border-color: var(--focus); }

/* Chips/tabs highlights with brand color */
.tab-btn.active { border-color: var(--teal); color: #fff; background: rgba(0,174,179,0.12); }

/* Status, notices – optional brand accent mappings */
.status-notice { background: rgba(237,163,21,.12); color: #EDAA2A; }


/* Buttons aligned to brand (flat teal, hover shades) */
.btn-primary { background: var(--teal); color: #fff; border-color: transparent; }
.btn-primary:hover { background: var(--turquoise-2); }
.btn-primary:active { background: var(--turquoise-3); }

/* Secondary and outline variants */
.btn-secondary { background:#0c1627; border:1px solid var(--border); color:#cbd6ea; }
.btn-secondary:hover { border-color: var(--graphite); }
.btn-outline { background:transparent; border:1.5px solid var(--teal); color:var(--teal); }
.btn-outline:hover { background:rgba(0,174,179,0.12); }

/* Ghost variant keeps minimal look, slightly stronger border for contrast */
.btn-ghost { background:transparent; border:1px dashed var(--graphite); color:#cbd6ea; }

/* Headings/brand weight & spacing */
.brand, h1, h2, h3 { font-weight:700; letter-spacing: .2px; }



/* ---- Clarity & Simplicity overrides ---- */
/* Typography scale */
body{ font-size:15px; line-height:1.6; color:#E6EDF6; }
.brand{ font-weight:700; font-size:18px; }
.section h3{ font-weight:600; font-size:14px; color:#cfd8ea; text-transform:uppercase; letter-spacing:.4px; }
.muted{ color:#9fb1cc; font-size:13px; }

/* Cards: lighter borders, softer shadows, more space instead of separators */
.card{ box-shadow: 0 6px 18px rgba(0,0,0,.28); border-color: rgba(255,255,255,.06); }
.section{ padding:16px 18px 12px; border-bottom: none; }
.card .actions{ padding:16px 18px; }
.card + .card{ margin-top:14px; }

/* Inputs */
.input{ border-color: rgba(255,255,255,.08); background:#0b1424; border-radius:10px; }
.input:focus{ border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,174,179,.18); }

/* Tabs & chips */
.tab-btn{ background:#0c1627; border-color: rgba(255,255,255,.08); color:#cbd6ea; font-weight:600; }
.tab-btn.active{ background: rgba(0,174,179,.12); color:#e8f7f7; border-color: var(--teal); }

/* Dropzones: quieter borders */
.dropzone{ border-color: rgba(255,255,255,.08); background:#0f1a2c; }
.drop-inner{ border-color: rgba(255,255,255,.06); background:#0c1627; }
.dropzone.dragover .drop-inner{ background:#082024; }

/* Result & images: softer */
.result-img{ box-shadow: 0 6px 18px rgba(0,0,0,.28); border-color: rgba(255,255,255,.08); }

/* Headers in admin tables */
th{ color:#9fb1cc; font-weight:600; font-size:13px; }

/* General spacing utilities (non-breaking if absent) */
.sp-16{ margin-top:16px; }