/* LearnSpark Design System — web-only CSS
   Ported from Claude Design (styles/tokens.css + styles/components.css) v0.4.
   Scoped under [data-surface] wrappers injected by <DesignScope /> so it only
   applies to instructor web surfaces — the student iPad app is unaffected.
   Colour values are the GenSpark brand sheet, copied exactly (no oklch).
*/

:root {
  /* GenSpark brand, exact values (BRAND_COLOUR_PLAN.md). Bone ground,
     White band, Ink text, Muted supporting text, one Teal accent. */
  --ls-bg-0: #F6F6F3;
  --ls-bg-1: #FFFFFF;
  --ls-bg-2: #FFFFFF;
  --ls-bg-3: #EAEBE8;
  --ls-bg-4: #E1E2DF;

  /* One hairline weight sitewide. */
  --ls-line-1: rgba(16, 20, 21, 0.13);
  --ls-line-2: rgba(16, 20, 21, 0.13);
  --ls-line-3: rgba(16, 20, 21, 0.13);

  --ls-fg-0: #101415;
  --ls-fg-1: #101415;
  --ls-fg-2: #5A6163;
  --ls-fg-3: #5A6163;

  /* Primary — GenSpark teal */
  --ls-primary:    #0E7365;
  --ls-primary-hi: #0E7365;
  --ls-primary-lo: #0B5B50;
  --ls-primary-bg: #E3ECE8;
  --ls-primary-fg: #F2F2EF;

  --ls-ink: #0B0E0F;

  --ls-signal-ok:    #007C52;
  --ls-signal-warn:  #9B6118;
  --ls-signal-err:   #B94225;
  --ls-signal-info:  #3B6BB1;

  --ls-signal-ok-bg:   #E7F4EB;
  --ls-signal-warn-bg: #FAF0DB;
  --ls-signal-err-bg:  #FBE8E0;
  --ls-signal-info-bg: #E5ECF7;

  /* Orange is retired by the brand; warmth resolves to the warning ink. */
  --ls-warmth: #9B6118;
  --ls-warmth-bg: #FAF0DB;

  --ls-font-sans: "Schibsted Grotesk", Helvetica, Arial, sans-serif;
  --ls-font-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;

  --ls-r-sm: 4px;
  --ls-r-md: 6px;
  --ls-r-lg: 10px;
  --ls-r-xl: 14px;
}

/* Dark theme (projection + optional instructor preference) */
[data-theme="dark"] {
  /* Brand near-black band. Cards lift with white at 4/7/10/13%. */
  --ls-bg-0: #0B0E0F;
  --ls-bg-1: #151819;
  --ls-bg-2: #1C1F20;
  --ls-bg-3: #232627;
  --ls-bg-4: #2B2D2E;
  --ls-line-1: rgba(255, 255, 255, 0.15);
  --ls-line-2: rgba(255, 255, 255, 0.15);
  --ls-line-3: rgba(255, 255, 255, 0.15);
  --ls-fg-0: #F2F2EF;
  --ls-fg-1: #F2F2EF;
  --ls-fg-2: #7E807F;
  --ls-fg-3: #7E807F;
  --ls-primary:    #19B295;
  --ls-primary-hi: #19B295;
  --ls-primary-lo: #128A73;
  --ls-primary-bg: #0D2723;
  --ls-primary-fg: #0B0E0F;
  --ls-signal-ok:    #4ACF8B;
  --ls-signal-warn:  #E5B048;
  --ls-signal-err:   #EE6F5E;
  --ls-signal-info:  #6FA3E5;
  --ls-signal-ok-bg:   #12352A;
  --ls-signal-warn-bg: #3B2D14;
  --ls-signal-err-bg:  #3A1F1B;
  --ls-signal-info-bg: #182A42;
  --ls-warmth: #E5B048;
  --ls-warmth-bg: #3B2D14;
}

/* Per-surface density — matches Claude Design spec. */
[data-surface="student"]    { --ls-row-h: 48px; --ls-card-pad: 22px; }
[data-surface="instructor"] { --ls-row-h: 30px; --ls-card-pad: 12px; }
[data-surface="projection"] { --ls-row-h: 56px; --ls-card-pad: 20px; }

/* Rendering calibration applied to all LS-scoped text. */
[data-surface] {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ls-tabular { font-variant-numeric: tabular-nums; }

.ls-bg-grid {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--ls-line-1) 60%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--ls-line-1) 60%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}

/* Scrollbar polish — instructor surfaces only. */
[data-surface="instructor"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-surface="instructor"] ::-webkit-scrollbar-thumb {
  background: var(--ls-line-2); border-radius: 10px;
  border: 2px solid var(--ls-bg-0);
}
[data-surface="instructor"] ::-webkit-scrollbar-track { background: transparent; }

/* ────────────────────────────────────────────────────────────────
   Subtle elevation gradients for the instructor-web dark surface.
   Everything here is scoped to [data-surface="instructor"][data-theme="dark"]
   so the light theme, the student iPad, and the projection surface
   are never affected.
   ──────────────────────────────────────────────────────────────── */

/* Body atmosphere: a near-imperceptible teal glow top-right + a
   darker sink bottom-left. Gives the canvas depth without competing
   with content. Both stops use the brand primary hue at low alpha. */
[data-surface="instructor"][data-theme="dark"] {
  background-image:
    radial-gradient(
      1200px 600px at 92% -10%,
      rgba(25, 178, 149, 0.08),
      transparent 70%
    ),
    radial-gradient(
      900px 500px at 0% 110%,
      rgba(11, 14, 15, 0.55),
      transparent 65%
    );
  background-attachment: fixed;
}

/* Card lift: a single-pixel top highlight + a very subtle vertical
   gradient. Too faint to read as "a gradient" but enough to separate
   cards from the canvas without a heavy border. */
[data-surface="instructor"][data-theme="dark"] .ls-card-lift,
[data-surface="instructor"][data-theme="dark"] [data-lift="1"] {
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.015),
    rgba(0, 0, 0, 0.04)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 10px 30px -12px rgba(0, 0, 0, 0.4);
}

/* Primary CTA: gentle vertical gradient from the brighter logo teal
   to the deeper pressed-state teal. Reads as a tactile button. */
[data-surface="instructor"][data-theme="dark"] [data-lift="primary"] {
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.12),
    rgba(0, 0, 0, 0.08)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.3);
}