/* ============================
   Part 1 — Base / Reset / Layout
   File: assets/css/style-base.css
   ============================ */

/* Root theme variables */
:root{
  --color-primary: #FF5722;
  --color-secondary: #1A237E;
  --color-text-dark: #212121;
  --color-text-light: #FFFFFF;
  --color-border: #D1D5DB;
  --color-bg: #F4F6F9;
  --max-width: 1200px;
  --radius-pill: 999px;
  --transition-fast: 0.18s ease;
}

/* Reset & box-sizing */
*,
*::before,
*::after{ box-sizing: border-box; margin:0; padding:0; }

/* Basic body */
html,body{ height:100%; }
body{
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--color-text-dark);
  background:var(--color-bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Accessibility: focus visible */
:focus{ outline:3px solid rgba(255,87,34,0.25); outline-offset:3px; }
.skip-link{ position:absolute; left:10px; top:-9999px; background:#000; color:#fff; padding:8px 12px; border-radius:6px; z-index:9999; }
.skip-link:focus{ top:10px; }

/* Headings & text */
h1,h2,h3,h4,h5{ color:var(--color-text-dark); margin-bottom:.4rem; line-height:1.15; font-weight:600; }
p{ margin-bottom:0.9rem; }

/* Links */
a{ color:var(--color-primary); text-decoration:none; transition:color var(--transition-fast); }
a:hover, a:focus{ color:#E64A19; text-decoration:underline; }

/* Layout helpers */
.container{ max-width:var(--max-width); margin:0 auto; padding:0 20px; }
.site{ min-height:100vh; display:flex; flex-direction:column; }
.site-content{ flex:1; }

/* Utility classes */
.hidden{ display:none !important; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}