/**
 * ComputingSkillSet.com - Demo Base Styles
 * Version: 1.1 (2026-09-30: every :hover gated behind a pointer query)
 *
 * PURPOSE: Defines the site's visual identity as CSS custom properties, plus
 * a small set of ready-made component classes that demos can use directly.
 * Every demo links to this file in its <head>.
 *
 * MAINTENANCE RULE: Do not modify existing variables or class names - doing so
 * changes every demo at once. Only additions are safe. Fix bugs, don't refactor.
 *
 * USAGE IN DEMOS:
 *   Always use var(--css-*) for colors, spacing, and typography.
 *   Never hardcode hex values or pixel sizes in a demo - use these tokens.
 */

/* --- Design Tokens --- */

:root {

  /* Brand / Primary
     Single green derived from the CSS pixel logo. One shade, used everywhere. */
  --css-primary:        #1a7a3c;
  --css-primary-dark:   #14532d;   /* hover states, footer, deeper emphasis    */
  --css-primary-light:  #bbf7d0;   /* subtle tints, highlight backgrounds      */

  /* Surfaces */
  --css-bg:             #f8fafc;   /* page background                          */
  --css-surface:        #ffffff;   /* cards, panels, input backgrounds         */
  --css-surface-raised: #f1f5f9;   /* slightly elevated areas, code blocks     */

  /* Text */
  --css-text:           #1e293b;   /* primary body text (not pure black)       */
  --css-text-muted:     #64748b;   /* labels, meta, placeholders               */
  --css-text-on-primary:#ffffff;   /* text on green buttons/badges             */

  /* Borders */
  --css-border:         #e2e8f0;   /* default card / input borders             */
  --css-border-strong:  #cbd5e1;   /* dividers, focused inputs                 */

  /* Semantic feedback - for quiz/game demo states */
  --css-success:        #16a34a;
  --css-success-bg:     #dcfce7;
  --css-error:          #dc2626;
  --css-error-bg:       #fee2e2;
  --css-warning:        #d97706;
  --css-warning-bg:     #fef3c7;
  --css-info:           #2563eb;
  --css-info-bg:        #dbeafe;

  /* Typography */
  --css-font-sans:      'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --css-font-mono:      ui-monospace, 'Cascadia Code', 'Courier New', monospace;
  --css-font-size-base: 16px;
  --css-line-height:    1.65;

  /* Spacing scale (use multiples of 0.25rem) */
  --css-space-xs:  0.25rem;   /*  4px */
  --css-space-sm:  0.5rem;    /*  8px */
  --css-space-md:  1rem;      /* 16px */
  --css-space-lg:  1.5rem;    /* 24px */
  --css-space-xl:  2rem;      /* 32px */
  --css-space-2xl: 3rem;      /* 48px */

  /* Border radius */
  --css-radius-sm: 4px;
  --css-radius-md: 8px;
  --css-radius-lg: 12px;
  --css-radius-xl: 20px;

  /* Shadows */
  --css-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --css-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);

  /* Transitions */
  --css-transition: 0.15s ease;
}


/* --- Base Reset --- */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: var(--css-space-md);
  background: var(--css-bg);
  color: var(--css-text);
  font-family: var(--css-font-sans);
  font-size: var(--css-font-size-base);
  line-height: var(--css-line-height);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--css-text);
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: var(--css-space-md);
}

p { margin-top: 0; }

a {
  color: var(--css-primary);
  text-decoration: underline;
}

/* Every :hover in this file sits behind a pointer query. A touch screen keeps :hover on
   the last element tapped, so an ungated hover rule paints a state the learner never
   chose — a button stays filled, a toggled-off bit keeps its highlight — until the next
   tap. Each rule is wrapped where it stands, so the cascade order is unchanged. */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--css-primary-dark); }
}

code {
  font-family: var(--css-font-mono);
  font-size: 0.9em;
  background: var(--css-surface-raised);
  border: 1px solid var(--css-border);
  border-radius: var(--css-radius-sm);
  padding: 0.1em 0.4em;
}

pre {
  font-family: var(--css-font-mono);
  background: var(--css-surface-raised);
  border: 1px solid var(--css-border);
  border-radius: var(--css-radius-md);
  padding: var(--css-space-md);
  overflow-x: auto;
  font-size: 0.9em;
}


/* --- Buttons --- */

.css-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--css-space-sm);
  padding: var(--css-space-sm) var(--css-space-lg);
  background: var(--css-primary);
  color: var(--css-text-on-primary);
  border: 2px solid transparent;
  border-radius: var(--css-radius-sm);
  font-family: var(--css-font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--css-transition), transform var(--css-transition);
  user-select: none;
}

@media (hover: hover) and (pointer: fine) {
  .css-btn:hover {
    background: var(--css-primary-dark);
    color: var(--css-text-on-primary);
  }
}

.css-btn:active {
  transform: translateY(1px);
}

.css-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Outlined variant */
.css-btn--secondary {
  background: transparent;
  color: var(--css-primary);
  border-color: var(--css-primary);
}

@media (hover: hover) and (pointer: fine) {
  .css-btn--secondary:hover {
    background: var(--css-primary);
    color: var(--css-text-on-primary);
  }
}

/* Small variant */
.css-btn--sm {
  padding: var(--css-space-xs) var(--css-space-md);
  font-size: 0.875rem;
}


/* --- Panel / Card --- */

.css-panel {
  background: var(--css-surface);
  border: 1px solid var(--css-border);
  border-radius: var(--css-radius-md);
  padding: var(--css-space-lg);
  box-shadow: var(--css-shadow-sm);
}

.css-panel + .css-panel {
  margin-top: var(--css-space-md);
}


/* --- Score Badge --- */

.css-score {
  display: inline-block;
  padding: var(--css-space-xs) var(--css-space-md);
  background: var(--css-primary);
  color: var(--css-text-on-primary);
  border-radius: var(--css-radius-xl);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}


/* --- Progress Bar --- */

.css-progress {
  width: 100%;
  height: 10px;
  background: var(--css-border);
  border-radius: var(--css-radius-xl);
  overflow: hidden;
}

.css-progress__bar {
  height: 100%;
  background: var(--css-primary);
  border-radius: var(--css-radius-xl);
  transition: width 0.4s ease;
  min-width: 0%;
  max-width: 100%;
}


/* --- Feedback Strips --- */
/* Used in quizzes / answer checking */

.css-feedback {
  padding: var(--css-space-sm) var(--css-space-md);
  border-radius: var(--css-radius-sm);
  font-weight: 500;
  margin-top: var(--css-space-sm);
  border-left: 4px solid transparent;
}

.css-feedback--correct {
  background: var(--css-success-bg);
  color: #166534;
  border-left-color: var(--css-success);
}

.css-feedback--wrong {
  background: var(--css-error-bg);
  color: #991b1b;
  border-left-color: var(--css-error);
}

.css-feedback--info {
  background: var(--css-info-bg);
  color: #1e40af;
  border-left-color: var(--css-info);
}


/* --- Label --- */
/* Small uppercase section labels, used above inputs or demo sections */

.css-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--css-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--css-space-xs);
}


/* --- Input --- */

.css-input {
  width: 100%;
  padding: var(--css-space-sm) var(--css-space-md);
  background: var(--css-surface);
  color: var(--css-text);
  border: 1px solid var(--css-border-strong);
  border-radius: var(--css-radius-sm);
  font-family: var(--css-font-sans);
  font-size: 1rem;
  transition: border-color var(--css-transition), box-shadow var(--css-transition);
}

.css-input:focus {
  outline: none;
  border-color: var(--css-primary);
  box-shadow: 0 0 0 3px rgba(26, 122, 60, 0.15);
}


/* --- Utility --- */

.css-text-muted  { color: var(--css-text-muted); }
.css-text-center { text-align: center; }
.css-mt-sm       { margin-top: var(--css-space-sm); }
.css-mt-md       { margin-top: var(--css-space-md); }
.css-mt-lg       { margin-top: var(--css-space-lg); }
.css-hidden      { display: none !important; }