/**
 * OUR Brand CSS - Design Tokens
 *
 * Based on the OUR Interactive Classroom (IC) design system.
 * Colors, fonts, and sizes sourced from IC branding guidelines.
 */

/* Adobe Fonts (Source Sans 3 + Agenda One) loaded via <link> in HTML templates */

:root {
  /* ============================================
   * COLOR PALETTE
   * Based on OUR Interactive Classroom brand
   * ============================================ */

  /* Primary Colors - OUR brand orange */
  --our-color-primary: #f25e35;
  --our-color-primary-light: #f57e5e;
  --our-color-primary-dark: #d83e00;
  --our-color-primary-alpha: rgba(242, 94, 53, 0.1);

  /* Secondary Colors - OUR brand yellow */
  --our-color-secondary: #feb300;
  --our-color-secondary-light: #ffe199;
  --our-color-secondary-dark: #d89800;

  /* Highlight tints (from IC brand yellow) */
  --our-color-highlight: #feb300;
  --our-color-highlight-tint4: #ffe199;
  --our-color-highlight-tint3: #ffe8b2;
  --our-color-highlight-tint2: #fff0cc;
  --our-color-highlight-tint1: #fff7e5;

  /* Sheer (semi-transparent) brand colors */
  --our-color-sheer-white-75: #ffffffbf;
  --our-color-sheer-highlight-75: #feb300bf;
  --our-color-sheer-orange-75: #f25e35bf;
  --our-color-sheer-accent-75: #d83e00bf;

  /* Neutral Colors - based on IC grayscale */
  --our-color-gray-50: #fafafa;
  --our-color-gray-100: #f5f5f5;
  --our-color-gray-200: #e5e5e5;
  --our-color-gray-300: #d4d4d4;
  --our-color-gray-400: #a3a3a3;
  --our-color-gray-500: #737373;
  --our-color-gray-600: #525252;
  --our-color-gray-700: #404040;
  --our-color-gray-800: #262626;
  --our-color-gray-900: #171717;
  --our-color-gray-950: #0a0a0a;

  /* Semantic Colors */
  --our-color-success: #10b981;
  --our-color-success-light: #d1fae5;
  --our-color-success-dark: #059669;

  --our-color-warning: #feb300;
  --our-color-warning-light: #fff7e5;
  --our-color-warning-dark: #d89800;

  --our-color-danger: #ef4444;
  --our-color-danger-light: #fee2e2;
  --our-color-danger-dark: #dc2626;

  --our-color-info: #3b82f6;
  --our-color-info-light: #dbeafe;
  --our-color-info-dark: #2563eb;

  /* Background Colors */
  --our-color-bg: #fff;
  --our-color-bg-alt: #f5f5f5;
  --our-color-bg-elevated: #ffffff;
  --our-color-card: #ffffff;

  /* Text Colors - OUR brand dark gray */
  --our-color-text: #3e2e2f;
  --our-color-text-secondary: #685d55;
  --our-color-text-muted: #777;
  --our-color-text-inverse: #ffffff;

  /* Border Colors */
  --our-color-border: #bfbfbf;
  --our-color-border-strong: #777;

  /* Nav Colors */
  --our-color-nav-active-bg: #fff7e5;
  --our-color-nav-active-text: #d83e00;

  /* Third-party SSO colors */
  --our-color-clever-blue: #1464ff;
  --our-color-classlink-blue: #0a4d7f;

  /* ============================================
   * TYPOGRAPHY
   * IC uses Source Sans 3 for body, Agenda One for display
   * ============================================ */

  /* Font Family */
  --our-font-family: source-sans-3, sans-serif;
  --our-font-family-display: agenda-one, sans-serif;
  --our-font-family-mono: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas, monospace;

  /* Modular Scale (1.25) - IC type scale */
  --our-mod-scale: 1.25;
  --our-font-size-xs: 0.8rem;
  --our-font-size-sm: 0.875rem;
  --our-font-size-base: 1rem;
  --our-font-size-lg: 1.25rem;
  --our-font-size-xl: 1.5625rem;
  --our-font-size-2xl: 1.953rem;
  --our-font-size-3xl: 2.441rem;
  --our-font-size-4xl: 3.052rem;
  --our-font-size-5xl: 3.815rem;

  /* Font Weights */
  --our-font-weight-normal: 400;
  --our-font-weight-medium: 600; /* Typekit kit provides 400/600/700; use 600 for medium */
  --our-font-weight-semibold: 600;
  --our-font-weight-bold: 700;

  /* Line Heights */
  --our-line-height-tight: 1;
  --our-line-height-normal: 1.5;
  --our-line-height-relaxed: 1.75;

  /* Letter Spacing */
  --our-letter-spacing-tight: -0.025em;
  --our-letter-spacing-normal: 0;
  --our-letter-spacing-wide: 0.025em;

  /* Vertical rhythm factor (IC uses 0.75) */
  --our-rhythm: 0.75;

  /* ============================================
   * SPACING
   * ============================================ */

  --our-spacing-0: 0;
  --our-spacing-1: 0.25rem;
  --our-spacing-2: 0.5rem;
  --our-spacing-3: 0.75rem;
  --our-spacing-4: 1rem;
  --our-spacing-5: 1.25rem;
  --our-spacing-6: 1.5rem;
  --our-spacing-8: 2rem;
  --our-spacing-10: 2.5rem;
  --our-spacing-12: 3rem;
  --our-spacing-16: 4rem;
  --our-spacing-20: 5rem;
  --our-spacing-24: 6rem;

  /* ============================================
   * BORDERS & RADIUS
   * IC uses 0.4rem radius, 0.125rem border
   * ============================================ */

  --our-border-width: 0.125rem;
  --our-border-width-2: 0.1875rem;

  --our-radius-sm: 0.25rem;
  --our-radius-md: 0.4rem;
  --our-radius-lg: 0.4rem;
  --our-radius-xl: 0.75rem;
  --our-radius-2xl: 1rem;
  --our-radius-full: 9999px;

  /* ============================================
   * SHADOWS
   * IC panel-style shadows
   * ============================================ */

  --our-shadow-sm: 0 0 0 1px rgba(0, 0, 0, 0.05);
  --our-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.1);
  --our-shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0.3rem 0.5rem 0 rgba(0, 0, 0, 0.15);
  --our-shadow-lg: 0 0.3rem 0.5rem 0 rgba(0, 0, 0, 0.15), 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
  --our-shadow-xl: 0 0.5rem 1.5rem 0 rgba(0, 0, 0, 0.15), 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.1);

  /* Button sheen variables (IC tactile style) */
  --our-button-sheen-subtle: var(--our-color-sheer-white-75);
  --our-button-sheen-strong: #fff;

  /* ============================================
   * TRANSITIONS
   * ============================================ */

  --our-transition-fast: 150ms ease;
  --our-transition-normal: 200ms ease;
  --our-transition-slow: 300ms ease;

  /* ============================================
   * Z-INDEX
   * ============================================ */

  --our-z-dropdown: 1000;
  --our-z-sticky: 1020;
  --our-z-fixed: 1030;
  --our-z-modal-backdrop: 1040;
  --our-z-modal: 1050;
  --our-z-popover: 1060;
  --our-z-tooltip: 1070;
  --our-z-toast: 1080;

  /* ============================================
   * BREAKPOINTS (for reference, matching IC)
   * ============================================ */

  /*
   * --our-breakpoint-nano: 320px;
   * --our-breakpoint-micro: 411px;
   * --our-breakpoint-sm: 537px;
   * --our-breakpoint-md: 768px;
   * --our-breakpoint-lg: 1024px;
   * --our-breakpoint-xl: 1320px;
   */

  /* ============================================
   * CONTAINER WIDTHS
   * ============================================ */

  --our-container-sm: 640px;
  --our-container-md: 768px;
  --our-container-lg: 1024px;
  --our-container-xl: 1280px;
  --our-container-2xl: 1536px;
}

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

/* Base styles */
html {
  line-height: calc(2 * var(--our-rhythm));
  font-size: revert;
  text-size-adjust: none;
}

/* Force form elements to inherit font — browsers default these to system fonts */
body.our-app button,
body.our-app input,
body.our-app select,
body.our-app textarea {
  font-family: inherit;
}

body.our-app {
  margin: 0;
  padding: 0;
  font-family: var(--our-font-family);
  font-size: var(--our-font-size-base);
  line-height: var(--our-line-height-normal);
  color: var(--our-color-text);
  background-color: var(--our-color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings use display font */
body.our-app :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--our-font-family-display);
  font-weight: 700;
  line-height: var(--our-line-height-tight);
  margin: 0;
}

/* Accessibility - screen reader only */
.our-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: var(--our-spacing-2) var(--our-spacing-4);
  background: var(--our-color-primary-dark);
  color: var(--our-color-text-inverse);
  z-index: var(--our-z-toast);
  transition: top var(--our-transition-fast);
}

.our-skip-link:focus {
  top: 0;
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Focus styles - IC double-ring pattern */
*:focus {
  outline: none;
}

:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 0.15em var(--our-color-bg),
    0 0 0 0.3em var(--our-color-primary-dark);
}

@media (forced-colors: active) {
  *:focus-visible {
    outline: 0.2em solid;
  }
}

/* Selection */
::selection {
  background-color: var(--our-color-primary-alpha);
}