/* =========================================================
   romelmasagca.com tool theme (CaseForge, Palettely, Lipsum)
   ---------------------------------------------------------
   One set of colours, fonts and buttons for every Design Tools app,
   matching the main site's blueprint look, in a light and a dark theme.

   Usage, in <head> (before the tool's own stylesheet):
     <script src="../shared/rm-tools.js"></script>      sets the theme before the page paints
     <link rel="stylesheet" href="../shared/rm-tools.css">
   and <body class="rm-tool">.

   Each tool maps its own CSS variables onto the --rm-* tokens below,
   so changing a colour here changes it in every tool.

   MASTER COPY: RomelMasagca.COM/_template/tools/rm-tools.css.
   build.js copies it into each app's shared/ folder; edit it here, not there.
   ========================================================= */

/* Tools whose markup toggles content with the hidden attribute (SVG icons included) */
[hidden] { display: none !important; }

/* ---------- Tokens: light theme (default) ---------- */
:root {
  --rm-head: 'Rajdhani', 'Arial Narrow', sans-serif;
  --rm-body: 'Inter', system-ui, -apple-system, sans-serif;
  --rm-mono: 'JetBrains Mono', ui-monospace, monospace;

  --rm-bg:           #eef3f9;
  --rm-grid:         rgba(11, 42, 74, .05);
  --rm-surface:      #ffffff;
  --rm-surface-2:    #f5f8fc;
  --rm-border:       #d3deea;
  --rm-text:         #0b2a4a;
  --rm-muted:        #52708f;

  --rm-primary:       #1a5fb4;   /* links, active states */
  --rm-primary-hover: #134a8e;
  --rm-primary-ink:   #ffffff;   /* text on --rm-primary */
  --rm-primary-soft:  #e2edf9;

  --rm-amber:     #ffb020;       /* brand accent, main call-to-action */
  --rm-amber-ink: #071d35;
  --rm-danger:    #c0392b;
  --rm-success:   #137044;   /* ≥ 4.5:1 on white and on light green tints */

  --rm-navy:      #0b2a4a;
  --rm-navy-deep: #071d35;
  --rm-hero-ink:  #e8f2ff;
  --rm-hero-muted:#9ebfe0;
  --rm-hero-bg:
    linear-gradient(rgba(173,216,255,.14) 1px, transparent 1px) 0 0/100px 100px,
    linear-gradient(90deg, rgba(173,216,255,.14) 1px, transparent 1px) 0 0/100px 100px,
    linear-gradient(rgba(173,216,255,.05) 1px, transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg, rgba(173,216,255,.05) 1px, transparent 1px) 0 0/20px 20px,
    radial-gradient(ellipse at center, #0b2a4a, #071d35 85%);

  --rm-radius-sm: 4px;
  --rm-radius:    6px;
  --rm-radius-lg: 10px;

  --rm-shadow-sm: 0 1px 3px rgba(11,42,74,.08), 0 1px 2px rgba(11,42,74,.05);
  --rm-shadow-md: 0 4px 14px rgba(11,42,74,.10), 0 2px 4px rgba(11,42,74,.05);
  --rm-shadow-lg: 0 12px 32px rgba(11,42,74,.14), 0 4px 8px rgba(11,42,74,.06);

  --rm-ease: .2s ease;
  color-scheme: light;
}

/* ---------- Tokens: dark theme ---------- */
:root[data-theme="dark"] {
  --rm-bg:           #061a30;
  --rm-grid:         rgba(173, 216, 255, .05);
  --rm-surface:      #0b2a4a;
  --rm-surface-2:    #0e3256;
  --rm-border:       #1e4570;
  --rm-text:         #e8f2ff;
  --rm-muted:        #9ebfe0;

  --rm-primary:       #ffb020;
  --rm-primary-hover: #ffc24d;
  --rm-primary-ink:   #071d35;
  --rm-primary-soft:  rgba(255, 176, 32, .14);

  --rm-danger:  #ff7a6b;
  --rm-success: #4fd18b;

  --rm-shadow-sm: 0 1px 3px rgba(0,0,0,.35);
  --rm-shadow-md: 0 4px 14px rgba(0,0,0,.40);
  --rm-shadow-lg: 0 12px 32px rgba(0,0,0,.50);
  color-scheme: dark;
}

/* ---------- Base ---------- */
body.rm-tool {
  font-family: var(--rm-body);
  color: var(--rm-text);
  background:
    linear-gradient(var(--rm-grid) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, var(--rm-grid) 1px, transparent 1px) 0 0/40px 40px,
    var(--rm-bg);
  transition: background-color var(--rm-ease), color var(--rm-ease);
}
body.rm-tool :is(h1, h2, h3, h4) { font-family: var(--rm-head); letter-spacing: .02em; }
body.rm-tool :is(code, kbd, samp) { font-family: var(--rm-mono); }
body.rm-tool :focus-visible { outline: 2px solid var(--rm-primary); outline-offset: 2px; }

/* ---------- Tool bar ---------- */
.rm-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--rm-surface);
  border-bottom: 1px solid var(--rm-border);
  box-shadow: var(--rm-shadow-sm);
  transition: background-color var(--rm-ease), border-color var(--rm-ease);
}
.rm-bar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 20px;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.rm-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--rm-text);
  text-decoration: none !important;
  font-family: var(--rm-head);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: .03em;
  line-height: 1;
}
.rm-logo b { color: var(--rm-primary); font-weight: 700; }
.rm-logo-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--rm-radius);
  border: 1.5px solid var(--rm-amber);
  background: var(--rm-navy);
  color: var(--rm-amber);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  overflow: hidden;
}

.rm-nav { display: flex; align-items: center; gap: 6px; }
.rm-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }

/* ---------- Buttons (also used for links) ---------- */
.rm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  background: var(--rm-surface);
  color: var(--rm-text);
  font: 600 .875rem/1.2 var(--rm-body);
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--rm-ease), border-color var(--rm-ease), color var(--rm-ease), transform .1s;
}
.rm-btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rm-btn:hover { border-color: var(--rm-primary); color: var(--rm-primary); background: var(--rm-primary-soft); }
.rm-btn:active { transform: translateY(1px); }
.rm-btn.is-active, .rm-btn[aria-pressed="true"].rm-tab {
  background: var(--rm-primary);
  border-color: var(--rm-primary);
  color: var(--rm-primary-ink);
}
.rm-btn-primary {
  background: var(--rm-amber);
  border-color: var(--rm-amber);
  color: var(--rm-amber-ink);
}
.rm-btn-primary:hover { background: #ffc24d; border-color: #ffc24d; color: var(--rm-amber-ink); }
.rm-btn-icon { width: 38px; padding: 0; }

/* Theme toggle: moon in light theme (switch to dark), sun in dark theme */
.rm-theme-toggle .rm-sun { display: none; }
:root[data-theme="dark"] .rm-theme-toggle .rm-sun { display: block; }
:root[data-theme="dark"] .rm-theme-toggle .rm-moon { display: none; }

.rm-menu-btn { display: none; }

/* ---------- Hero band (same blueprint panel in both themes) ---------- */
.rm-hero {
  background: var(--rm-hero-bg);
  color: var(--rm-hero-ink);
  border-bottom: 1px solid rgba(173,216,255,.18);
}
.rm-hero h1 { color: var(--rm-hero-ink); text-transform: uppercase; letter-spacing: .04em; }
.rm-hero h1 em { font-style: normal; color: var(--rm-amber); }
.rm-hero p { color: var(--rm-hero-muted); }
.rm-hero .rm-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 .72rem var(--rm-mono); letter-spacing: .2em; color: var(--rm-amber);
  margin-bottom: 10px; text-transform: uppercase;
}
.rm-hero .rm-kicker::before { content: ""; width: 32px; height: 1px; background: var(--rm-amber); }

/* ---------- Icon badge (feature lists, cards) ---------- */
.rm-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--rm-radius);
  border: 1.5px solid var(--rm-primary);
  color: var(--rm-primary);
  background: var(--rm-primary-soft);
}
.rm-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Phones / small tablets ---------- */
@media (max-width: 820px) {
  .rm-menu-btn { display: inline-flex; }
  .rm-nav.rm-collapse {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 6px;
    padding: 12px 20px 16px;
    background: var(--rm-surface);
    border-bottom: 1px solid var(--rm-border);
    box-shadow: var(--rm-shadow-md);
    display: none;
  }
  .rm-nav.rm-collapse.open { display: flex; }
  .rm-nav.rm-collapse .rm-btn { justify-content: flex-start; min-height: 44px; }
}
@media (max-width: 560px) {
  .rm-bar-inner { padding: 8px 14px; gap: 8px; }
  .rm-hide-sm { display: none; }
  .rm-logo { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  body.rm-tool *, body.rm-tool *::before, body.rm-tool *::after { transition: none !important; animation: none !important; }
}