:root {
      /* primary/orange tones (kept as before) */
      --primary: #BF5810;         /* used for primary buttons */
      --primary-soft: #F97316;    /* accent */

      /* page background colors — you had body: #e3c5b4 */
      --background-light: #e3c5b4; /* your chosen page background */
      --background-dark: #443328;  /* dark mode page background (from your .dark body) */

      /* card backgrounds */
      --card-bg: #ffffff;         /* keep default card bg (used before as var(--surface-light)) */
      --card-bg-dark: #9f7b57db;  /* your dark-card color (#5d452edb) */
	  
	  /* sidebar menu backgrounds */
	  --sidebarmenu-bg: #ffffff; 
	  --sidebarmenu-bg-dark: #a86b4d;

      /* outline button (you had rgb(255 102 0 / 72%) and text #f6dfce) */
      --btn-outline-bg: rgba(255,102,0,0.72); /* rgb(255 102 0 / 72%) */
      --btn-outline-text: #f6dfce;

      /* footer text color (you used #ff7e00) */
      --footer-text: #ff7e00;

      /* text color / muted */
      --text: #111827;
      --text-light: #f8fafc;
      --text-muted-light: #6b7280;
      --text-muted-dark: #818793;

      /* shadows and layout */
      --card-radius: 1.0rem;
      --shadow-light: 0 1px 4px rgba(0,0,0,0.06);
      --shadow-dark: 0 6px 18px rgba(0,0,0,0.6);
      --container-max: 1400px;
    }

    /* === Apply variables (replacing hard-coded colours) === */
    *, *::before, *::after { box-sizing: border-box; }
    html, body, #root { height: 100%; }
    body {
      margin: 0;
      font-family: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: var(--background-light); /* was hard-coded */
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 1.35;
    }

    .dark body { background: var(--background-dark); color: var(--text-light); }
    .dark { --text-muted: var(--text-muted-dark); }
    :not(.dark) { --text-muted: var(--text-muted-light); }

    .container { width: 92%; max-width: var(--container-max); margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
    .flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}
    .justify-between{justify-content:space-between}.min-h-screen{min-height:100vh}

    /* Header */
    header { border-bottom: 1px solid rgba(191,88,16,0.12); background: transparent; }
    .dark header { border-bottom-color: rgba(191,88,16,0.18); }
    nav .brand { display:flex; gap:.5rem; align-items:center; font-weight:700; font-size:1.125rem; color:inherit; text-decoration:none; }

    /* Buttons */
    button { font-family: inherit; }
    .btn {
      display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
      padding: .5rem .75rem; border-radius: .375rem; font-weight:600; font-size:.875rem;
      cursor:pointer; border:none; background: transparent;
    }
    .btn:focus { outline: 3px solid rgba(191,88,16,0.18); outline-offset: 2px; }
    .btn-primary { background: var(--primary); color: #ffffff; box-shadow: var(--shadow-light); }
    .btn-primary:hover { filter:brightness(.95); }
    .btn-outline {
      background: var(--btn-outline-bg); color: var(--btn-outline-text); width:50%;
    }
    .dark .btn-outline { background: var(--btn-outline-bg); color: var(--btn-outline-text); }
	.dark button#backToMain { color: var(--text-light); }

    /* Titles */
    h1 { margin:0; font-size:1.125rem; }
    h2 { font-size:1.75rem; margin:1rem 0 2rem; text-align:center; color:inherit; }

    /* Grid */
    .grid { display:grid; grid-template-columns:1fr; gap:1.25rem; }
    @media(min-width:640px){ .grid{grid-template-columns:repeat(2,1fr)} }
    @media(min-width:1024px){ .grid{grid-template-columns:repeat(3,1fr)} }
    @media(min-width:1400px){ .grid{grid-template-columns:repeat(4,1fr)} }

    /* Card */
    .card {
      display:flex; flex-direction:column; gap:.75rem; 
	  border-radius: var(--card-radius);
      background: var(--card-bg); padding-bottom:1rem; box-shadow: var(--shadow-light);
      transition: transform .12s ease, box-shadow .12s ease;
      position:relative; overflow:visible;
    }
    .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-dark); }
    .dark .card { background: var(--card-bg-dark); box-shadow: none; }

    /* media/image */
    .media { width:100%; aspect-ratio:3/4;
      border-top-left-radius: var(--card-radius);
      border-top-right-radius: var(--card-radius);
	  overflow:hidden; background:#eaeaea; display:block;
    }
    .media img { width:100%; height:100%; object-fit:cover; display:block; }

    .card-actions { display:flex; gap:.5rem; justify-content: center; align-items: center; }

    /* Footer text color replaced by variable */
    footer { border-top: 1px solid rgba(191,88,16,0.08); background: rgba(248,247,245,0.5); }
    .dark footer { background: rgba(15,15,15,0.6); border-top-color: rgba(191,88,16,0.14); }
    footer p { margin:0; padding:1rem 0; text-align:center; color: var(--footer-text); }

    /* small helpers */
    .skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
    .skip-link:focus { left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#111; color:#fff; z-index:9999; border-radius:.375rem; }

    .copied { position:relative; }
    .copied::after { content:attr(data-tooltip); position:absolute; right:0; top:-1.8rem; background:#111; color:#fff; font-size:.75rem; padding:.25rem .5rem; border-radius:4px; opacity:0; transform:translateY(.25rem); transition:opacity .12s, transform .12s; white-space:nowrap; }
    .copied.show::after { opacity:1; transform:translateY(0); }

    :focus:not(:focus-visible) { outline:none; }
	
	/* Sidebar menu */
	.sidebar {
	  position: fixed;
	  top: 0; left: -260px;
	  width: 260px;
	  height: 100%;
	  background: var(--sidebarmenu-bg);
	  box-shadow: 2px 0 10px rgba(0,0,0,0.3);
	  transition: left 0.3s ease;
	  z-index: 1000;
	  padding: 1rem;
	  display: flex;
	  flex-direction: column;
	}
	.dark .sidebar { background: var(--sidebarmenu-bg-dark); }
	.dark .sidebar .btn { color: var(--text-light); }
	.dark #menuToggle { color: var(--text-light); }

	.sidebar.open { left: 0; }

	.sidebar-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 1rem;
	}

	.sidebar-list {
	  list-style: none;
	  margin: 0;
	  padding: 0;
	  display: flex;
	  flex-direction: column;
	  gap: .75rem;
	}

	.sidebar-list .btn {
	  width: 100%;
	  justify-content: flex-start;
	  gap: .75rem;
	  font-size: 0.95rem;
	  border-radius: .5rem;
	  transition: background 0.2s;
	}

	.sidebar-list .btn:hover {
	  background: rgba(0,0,0,0.05);
	}
	.dark .sidebar-list .btn:hover {
	  background: rgba(255,255,255,0.08);
	}
	
	.sidebar a.btn {
		text-decoration: none;
		color: var(--text);
	}
	.dark .sidebar a.btn { color: var(--text-light); }