/*ADD MEDIA FOR EC! Right Here RESPONDIVE DESIGN



:-) */




  




:root{
  --font-size:20px;
  --background:#eedcf7;
  --foreground: oklch(0.145 0 0);
  --card:#ffffff;
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary:#000000;
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.95 0.0058 264.53);
  --secondary-foreground:#030213;
  --muted:#ececf0;
  --muted-foreground:#717182;
  --accent:#e9ebef;
  --accent-foreground:#030213;
  --destructive:#d4183d;
  --destructive-foreground:#ffffff;
  --border: rgba(0,0,0,0.1);
  --input: transparent;
  --input-background:#f3f3f5;
  --switch-background:#cbced4;
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: .625rem;


  --text-2xl:1.5rem;
  --text-xl:1.25rem;
  --text-lg:1.125rem;
  --text-base:1rem;
}

.dark{
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
}


*{ box-sizing:border-box; border-color:var(--border); outline-color: oklch(0.708 0 0 / .5); }
html{ font-size:var(--font-size); }
body{
  margin:0;
  font-family: raleway, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--background);
  color: var(--foreground);
}

/* Typography (browser-ready version of your @layer base rules) */
h1{ font-size:var(--text-2xl); font-weight:500; line-height:1.5; margin:.5rem 0; }
h2{ font-size:var(--text-xl);  font-weight:500; line-height:1.5; margin:.5rem 0; }
h3{ font-size:var(--text-lg);  font-weight:500; line-height:1.5; margin:.5rem 0; }
h4, p, label, button, input, select, textarea{
  font-size:var(--text-base); line-height:1.5;
}
label, button{ font-weight:500; }
p, input, select, textarea{ font-weight:400; }

/* ---- Layout helpers ---- */
.container{ width:min(100%, 960px); margin-inline:auto; padding-inline:1rem; }
.center{ text-align:center; }
.sub{ color:var(--muted-foreground); margin-top:.25rem; }
section{ padding:2rem 0; }

/* ---- Header / nav ---- */
.site-header{ border-bottom:1px solid var(--border); background:var(--card); }
.nav{ list-style:none; display:flex; gap:1rem; padding:.75rem 0; margin:0; }
.nav a{ color:#717182(--primary); text-decoration:none; padding:.25rem .5rem; border-radius:.5rem; }
.nav a:hover{ background:var(--accent); color:var(--accent-foreground); }
.nav{ justify-content: center; align-items: center; }
.nav-login{ margin-left:auto; }

/* ---- Forms ---- */
fieldset{ border:1px solid var(--border); border-radius:var(--radius); padding:1rem; margin:1rem 0; }
legend{ padding:0 .5rem; color:var(--primary); font-weight:600; }
.field{ display:flex; flex-direction:column; gap:.375rem; margin:.75rem 0; }

input[type=text], select, textarea{
  background:var(--input-background);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.6rem .75rem;
}

.actions{ display:flex; gap:.75rem; margin-top:1rem; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.6rem .9rem; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--muted); color:var(--foreground);
  cursor:pointer;
}
.btn:hover{ background:var(--accent); }
.btn-primary{
  background:var(--primary); color:var(--primary-foreground); border-color:transparent;
}
.btn-primary:hover{ filter:brightness(.95); }

/* ---- Accessibility helper ---- */
.skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus{ left:1rem; top:1rem; width:auto; height:auto; background:var(--primary); color:var(--primary-foreground); padding:.5rem .75rem; border-radius:.5rem; }