/*
  Design tokens. Every color, radius, blur, spacing and motion value lives here,
  so the whole look can be changed from this one file.
  Note: CSS variables cannot be used inside media queries, so the wide-screen
  breakpoint (900px) is written directly in base.css and components.css.
*/
:root {
  /* Accent (actions) */
  --color-accent: #5b5cf0;
  --gradient-accent: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --color-accent-soft: rgba(99, 102, 241, 0.14);
  --shadow-accent: 0 6px 18px rgba(99, 102, 241, 0.35);
  --color-on-accent: #ffffff;
  --color-danger: #e5484d;
  --gradient-right: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  --shadow-right: 0 6px 18px rgba(16, 185, 129, 0.35);
  --gradient-wrong: linear-gradient(135deg, #fb7185 0%, #e5484d 100%);
  --shadow-wrong: 0 6px 18px rgba(229, 72, 77, 0.32);
  --color-switch-off: rgba(27, 26, 46, 0.16);
  --color-knob: #ffffff;
  --shadow-knob: 0 2px 6px rgba(0, 0, 0, 0.2);
  --focus-ring: 0 0 0 4px rgba(99, 102, 241, 0.28);

  /* Text */
  --color-text: #1b1a2e;
  --color-text-secondary: rgba(27, 26, 46, 0.62);
  --color-text-tertiary: rgba(27, 26, 46, 0.36);

  /* Background: soft color blobs over a light base */
  --color-background: #ece9fb;
  --background-gradient:
    radial-gradient(42% 36% at 8% 6%, rgba(167, 139, 250, 0.8), transparent 70%),
    radial-gradient(36% 32% at 92% 4%, rgba(244, 114, 182, 0.55), transparent 70%),
    radial-gradient(46% 40% at 88% 68%, rgba(56, 189, 248, 0.5), transparent 70%),
    radial-gradient(42% 36% at 12% 92%, rgba(251, 191, 114, 0.55), transparent 70%),
    radial-gradient(38% 36% at 50% 48%, rgba(129, 140, 248, 0.3), transparent 70%),
    linear-gradient(160deg, #ece8ff 0%, #f7ecf7 50%, #e5f0fb 100%);

  /* Frosted glass */
  --glass-fill: linear-gradient(135deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.4));
  --glass-fill-strong: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.66));
  --glass-fill-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.56));
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 10px 30px rgba(60, 50, 140, 0.1), 0 2px 6px rgba(60, 50, 140, 0.05);
  --glass-shadow-raised: 0 16px 40px rgba(60, 50, 140, 0.16), 0 4px 10px rgba(60, 50, 140, 0.07);
  --blur-glass: 22px;
  --blur-strong: 36px;
  --glass-saturate: 170%;

  /* Other surfaces */
  --color-divider: rgba(27, 26, 46, 0.08);
  --color-row-hover: rgba(255, 255, 255, 0.4);
  --color-row-pressed: rgba(255, 255, 255, 0.6);
  --color-backdrop: rgba(30, 25, 70, 0.28);
  --color-input: rgba(255, 255, 255, 0.6);
  --color-input-focus: rgba(255, 255, 255, 0.9);
  --color-input-border: rgba(27, 26, 46, 0.1);
  --color-add-border: rgba(99, 102, 241, 0.4);
  --color-add-fill: rgba(255, 255, 255, 0.28);
  --color-on-badge: #ffffff;

  /* Course colors (one per course) */
  --course-red: #f2555a;
  --course-orange: #f98c3a;
  --course-yellow: #e8b622;
  --course-green: #2fb873;
  --course-teal: #13a8a0;
  --course-indigo: #5b5cf0;
  --course-purple: #a24cf0;
  --course-pink: #e84393;

  /* Flag colors */
  --flag-red: #ef4444;
  --flag-orange: #f97316;
  --flag-yellow: #eab308;
  --flag-green: #22c55e;
  --flag-blue: #3b82f6;
  --flag-purple: #a855f7;

  /* Card text (Markdown) */
  --color-code: rgba(27, 26, 46, 0.06);
  --color-table-border: rgba(27, 26, 46, 0.14);
  --color-quote: rgba(99, 102, 241, 0.4);
  --color-preview: rgba(255, 255, 255, 0.35);

  /* Sketch canvas and inks */
  --color-canvas: #ffffff;
  --ink-black: #1b1a2e;
  --ink-blue: #2563eb;
  --ink-red: #dc2626;
  --ink-green: #16a34a;

  /* Radii */
  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --gutter: 20px;

  /* Layout sizes */
  --tap: 44px;
  --topbar-height: 52px;
  --tabbar-height: 64px;
  --tabbar-gap: 12px;
  --sidebar-width: 240px;
  --sidebar-gap: 16px;
  --content-width: 880px;
  --sheet-width: 480px;
  --quiz-width: 860px;
  --quiz-card-height: 380px;

  /* Quiz card: a crisp white edge with a soft, see-through white frame around it */
  --card-edge: rgba(255, 255, 255, 0.95);
  --card-frame: rgba(255, 255, 255, 0.42);
  --card-frame-width: 8px;
  --card-inner-line: rgba(27, 26, 46, 0.05);

  /* Type */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-hero: 34px;
  --font-size-title: 20px;
  --font-size-body: 17px;
  --font-size-subhead: 15px;
  --font-size-small: 13px;
  --font-size-tab: 11px;

  /* Motion */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast: 0.2s;
  --duration-page: 0.4s;
  --duration-sheet: 0.5s;
  --duration-flip: 0.6s;
}