/* ========================================================================
File: public_html/templates/assets/theme.css
Sentinet Design System v1 – brand tokens & base components
Why: centralize look & feel and keep assets.css working via shared vars
===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");


:root{
/* Brand palette (tune if you have official HEX) */
--sentinet-navy-900: #0b2230;
--sentinet-navy-800: #0e2a3b;
--sentinet-navy-700: #10324a;
--sentinet-navy-600: #163d58;
--sentinet-navy-500: #1c4969;
--sentinet-yellow-500: #ffd23f; /* accent */
--sentinet-yellow-600: #e5b800;
--sentinet-ink: #0b1b26; /* primary text */
--sentinet-slate: #64748b; /* secondary text */
--sentinet-green: #16a34a;
--sentinet-red: #ef4444;
--sentinet-amber: #f59e0b;


/* Surface & borders */
--bg: #f7f9fc;
--surface: #ffffff;
--card: #ffffff;
--border: rgba(3, 7, 18, .08);
--shadow: 0 10px 30px rgba(2, 6, 23, .08);


/* Typography */
--fg: var(--sentinet-ink);
--muted: var(--sentinet-slate);
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";


/* Brand mapping for legacy components */
--brand: var(--sentinet-navy-800);
--link: var(--sentinet-navy-600);
--focus: rgba(255, 210, 63, .5);
}


/* Reset (minimal) */
*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme: light}
body{
margin:0;
color:var(--fg);
background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
font: 400 16px/1.6 var(--font-sans);
text-rendering: optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}


/* Utilities */
.container{max-width:1100px;margin-inline:auto;padding:24px}
.visually-hidden{position:absolute!important;clip:rect(0,0,0,0)!important;width:1px;height:1px;margin:-1px;overflow:hidden}
.center{display:grid;place-items:center}


/* Cards */
.card{
background:var(--card);
border:1px solid var(--border);
border-radius:18px;
box-shadow:var(--shadow);
}


/* Buttons */
.btn{--_bg:#e2e8f0;--_fg:#0f172a;--_b:transparent;--_ring:transparent;
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:12px 16px;border-radius:12px;border:1px solid var(--_b);
background:var(--_bg);color:var(--_fg);font-weight:600;cursor:pointer;
transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:0;box-shadow:0 0 0 4px var(--_ring)}
.btn--primary{--_bg:var(--sentinet-navy-800);--_fg:#fff;--_ring:var(--focus)}
.btn--accent{--_bg:var(--sentinet-yellow-500);--_fg:#0b1b26;--_ring:var(--focus)}
.btn--ghost{--_bg:transparent;--_b:var(--border)}
.btn--full{width:100%}


/* Forms */
.form{display:grid;gap:18px}
.form__row{display:grid;gap:8px}
.label{font-weight:600;color:var(--sentinet-navy-700)}
.input{height:48px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);
background:#fff;color:var(--fg);box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
);}