/* doSomeReps/frontend/src/styles/global.css */

:root {
  --rep-color-loading-indicator: #007bff;

  --rep-color-action-primary: #3182ce;
  --rep-color-on-action: #ffffff;
  --rep-color-divider-on-action: rgba(255, 255, 255, 0.25);

  --rep-color-surface: #ffffff;
  --rep-color-surface-subtle: #f8fafc;
  --rep-color-surface-secondary: #edf2f7;
  --rep-color-surface-secondary-hover: #e2e8f0;
  /* A card held for the next save: the que's cyan, washed out to a surface. */
  --rep-color-surface-selected: #ecfeff;

  --rep-color-text-strong: #0f172a;
  --rep-color-text-primary: #2d3748;
  --rep-color-text-secondary: #4a5568;

  --rep-color-text-muted: #6c757d;
  --rep-color-text-subtle: #718096;

  --rep-color-border: #e2e8f0;
  --rep-color-border-strong: #cbd5e0;

  --rep-color-focus: #4299e1;
  --rep-color-focus-ring: rgba(66, 153, 225, 0.15);

  --rep-color-success-text: #155724;
  --rep-color-success-surface: #d4edda;
  --rep-color-success-border: #c3e6cb;

  --rep-color-error-text: #721c24;
  --rep-color-error-surface: #f8d7da;
  --rep-color-error-border: #f5c6cb;
  --rep-color-error-text-strong: #c53030;
  --rep-color-error-surface-subtle: #fff5f5;
  --rep-color-error-border-subtle: #feb2b2;

  /* The alert family's other two members, so every severity a toast can carry
     has a text, surface and border that read together. */
  --rep-color-info-text: #0c5460;
  --rep-color-info-surface: #d1ecf1;
  --rep-color-info-border: #bee5eb;

  --rep-color-warning-text: #856404;
  --rep-color-warning-surface: #fff3cd;
  --rep-color-warning-border: #ffeeba;

  /* Hover for the primary action colour, and its foreground dimmed for
     secondary copy sitting on a primary-coloured surface. */
  --rep-color-action-primary-hover: #2b6cb0;
  --rep-color-on-action-muted: rgba(255, 255, 255, 0.8);

  /* Status families, each a foreground plus the tinted surface and border it
     sits on. `error` already exists above; these complete the set. */
  --rep-color-success-text-strong: #2f855a;
  --rep-color-success-surface-subtle: #f0fff4;
  --rep-color-success-border-subtle: #9ae6b4;

  --rep-color-info-text-strong: var(--rep-color-action-primary-hover);
  /* The deep navy a panel titles itself in, and the blue it is outlined with. */
  --rep-color-info-text-deep: #1e3a8a;
  --rep-color-info-border-strong: #3b82f6;
  --rep-color-info-surface-subtle: #ebf8ff;
  --rep-color-info-border-subtle: #90cdf4;

  --rep-color-teal-text-strong: #234e52;
  --rep-color-teal-surface-subtle: #e6fffa;
  --rep-color-teal-border-subtle: #b2f5ea;

  --rep-color-overlay: rgba(0, 0, 0, 0.45);
  --rep-color-overlay-strong: rgba(0, 0, 0, 0.94);
  --rep-color-on-overlay: #ffffff;
  --rep-color-on-overlay-muted: rgba(255, 255, 255, 0.35);

  /* Chrome floating on a scrim: a wash of its foreground that brightens as
     the control is hovered and pressed. */
  --rep-color-glass: rgba(255, 255, 255, 0.12);
  --rep-color-glass-hover: rgba(255, 255, 255, 0.25);
  --rep-color-glass-active: var(--rep-color-on-overlay-muted);
  /* Fades the answer bar into a full-bleed image behind it. */
  --rep-gradient-image-scrim: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.5) 60%,
    transparent 100%
  );

  --rep-color-rating-star: var(--rep-intent-amber-bg);
  --rep-color-rating-star-empty: #cbd5e0;

  /* ---- Rating star scale ----
     `md` reads a rating inline with the question's meta; `lg` is the target the
     rating dialog is rated with. Holders rebind the alias, never the primitives. */
  --rep-rating-star-size-sm: 0.8rem;
  --rep-rating-star-size-md: 1.25rem;
  --rep-rating-star-size-lg: 2.5rem;
  --rep-rating-star-size: var(--rep-rating-star-size-md);

  /* Navbar Design Tokens */
  --rep-color-navbar-bg-start: #1e293b;
  --rep-color-navbar-bg-end: #0f172a;
  --rep-color-navbar-accent: #ff8c00;
  --rep-color-navbar-accent-hover: #ffa500;
  --rep-color-navbar-text-muted: #cbd5e1;
  --rep-color-navbar-accent-glow: rgba(255, 140, 0, 0.4);
  --rep-color-navbar-accent-glow-subtle: rgba(255, 140, 0, 0.2);
  --rep-color-navbar-accent-bg-highlight: rgba(255, 140, 0, 0.1);
  --rep-color-navbar-accent-bg-hover: rgba(255, 140, 0, 0.05);
  --rep-shadow-navbar: 0 4px 20px rgba(0, 0, 0, 0.25);

  /* Hairlines and washes that read as a tint of whatever they sit on, rather
     than as a colour of their own. */
  --rep-color-border-faint: rgba(0, 0, 0, 0.06);
  --rep-color-border-input: rgba(0, 0, 0, 0.15);
  --rep-color-surface-stripe: rgba(0, 0, 0, 0.05);

  /* ---- Question parts ----
     The editor and its live preview colour-code question, hint and answer so a
     writer can tell at a glance which field they are in. `-strong` is the
     header of a preview card; the plain pair is the editor's own field. */
  --rep-part-question-surface: #f2fff2;
  --rep-part-question-border: #b3ffb3;

  --rep-part-hint-surface: #f0ffff;
  --rep-part-hint-border: #99ffff;
  --rep-part-hint-surface-strong: #ecfeff;
  --rep-part-hint-border-strong: #cffafe;
  --rep-part-hint-text: #0e7490;

  --rep-part-answer-surface: #fff2ff;
  --rep-part-answer-border: #ffccff;
  --rep-part-answer-surface-strong: #fdf2f8;
  --rep-part-answer-border-strong: #fbcfe8;
  --rep-part-answer-text: #be185d;

  /* The editor's own title bar, which wears the answer colour at full strength. */
  --rep-editor-header-bg: #ff99ff;
  --rep-editor-header-border: #ff66ff;

  /* The chip a category is named in, wherever it is picked or merely shown. */
  --rep-color-category-chip-bg: #ffe6bf;
  --rep-color-category-chip-text: #7a4a00;

  /* Category Picker Design Tokens */
  --rep-cp-item-bg: #ffa500;
  --rep-cp-item-bg-active: #ff8c00;
  --rep-cp-item-bg-active-hover: #d67600;
  --rep-cp-item-border-active: #ff8c00;
  --rep-cp-item-text-active: #000000;

  /* A chip scales as one piece off its font size, so a reading view that wants
     bigger chips rebinds the alias and nothing else. */
  --rep-cat-chip-font-size-md: 0.78rem;
  --rep-cat-chip-font-size-lg: clamp(0.8em, 1rem + 1.4vw, 2rem);
  --rep-cat-chip-font-size: var(--rep-cat-chip-font-size-md);

  /* Categories read down a column before they wrap across to the next. */
  --rep-cat-column-width: 170px;
  --rep-cat-move-duration: 0.3s;


  /* ---- Intent palette ----
     One background / hover / foreground triple per intent. Buttons, badges and
     panels all draw from these, so a colour is written down exactly once. */
  --rep-intent-red-bg: #ef4444;
  --rep-intent-red-bg-hover: #dc2626;
  --rep-intent-red-fg: #ffffff;

  --rep-intent-green-bg: #22c55e;
  --rep-intent-green-bg-hover: #16a34a;
  --rep-intent-green-fg: #052e16;

  --rep-intent-amber-bg: #f59e0b;
  --rep-intent-amber-bg-hover: #d97706;
  --rep-intent-amber-fg: #111827;

  --rep-intent-blue-bg: #007bff;
  --rep-intent-blue-bg-hover: #0069d9;
  --rep-intent-blue-fg: #ffffff;

  --rep-intent-cyan-bg: #06b6d4;
  --rep-intent-cyan-bg-hover: #0891b2;
  --rep-intent-cyan-fg: #ffffff;

  --rep-intent-teal-bg: #319795;
  --rep-intent-teal-bg-hover: #2c7a7b;
  --rep-intent-teal-fg: #ffffff;

  --rep-intent-slate-bg: #475569;
  --rep-intent-slate-bg-hover: #334155;
  --rep-intent-slate-fg: #ffffff;

  /* For a control that sits on top of an intent-coloured surface: it darkens
     whatever it is on and keeps that surface's foreground. */
  --rep-intent-overlay-bg: rgba(0, 0, 0, 0.12);
  --rep-intent-overlay-bg-hover: rgba(0, 0, 0, 0.2);
  --rep-intent-overlay-fg: inherit;

  /* ---- Quiz page ----
     The reading column and the panel docked beneath it share one width so the
     two edges line up once the page stops being full-bleed. */
  --rep-quiz-max-width: 1280px;
  --rep-quiz-gap: 16px;
  /* Controls stop stretching the full reading column once there is room. */
  --rep-quiz-control-width: 560px;
  /* The audio plane beside the question: about a quarter of a wide page, never
     wider than this, and never so narrow its controls stop being readable. */
  --rep-quiz-aside-width: clamp(280px, 24%, 400px);

  --rep-color-panel-surface: rgba(255, 255, 255, 0.98);
  --rep-color-panel-grip: #9ca3af;
  --rep-color-panel-grip-hover: #6b7280;
  --rep-color-panel-scroll-thumb: var(--rep-color-panel-grip-hover);
  --rep-shadow-panel: 0 -4px 24px rgba(0, 0, 0, 0.12);
  --rep-shadow-listening: 0 0 24px rgba(239, 68, 68, 0.35);
  --rep-panel-gap: 10px;
  --rep-panel-padding: 12px;
  --rep-panel-radius: 16px;
  /* Strip of page a fully open panel always leaves uncovered, which is what
     keeps its grip on screen and grabbable. */
  --rep-panel-peek: 56px;

  /* The two type stacks the app uses: its UI face, and the face for anything
     the machine wrote back (keys, model ids, raw completions). */
  --rep-font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --rep-font-family-mono: SFMono-Regular, Consolas, Monaco, monospace;

  /* A panel resting on the page, and one lifted off it. */
  --rep-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  --rep-shadow-card-raised: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);

  --rep-radius-small: 0.25rem;
  --rep-radius-control: 6px;
  --rep-radius-dialog: 8px;
  --rep-radius-card: 12px;
  --rep-radius-circle: 50%;

  /* ---- Spinner scale ----
     `md` is the app-wide indicator; `lg` fills a waiting panel and `sm` sits
     inside a line of text. Holders rebind the aliases, never the primitives. */
  --rep-spinner-size-md: 2rem;
  --rep-spinner-size-lg: 3rem;
  --rep-spinner-size-sm: 1.2rem;
  --rep-spinner-border-md: 0.25em;
  --rep-spinner-border-sm: 0.2rem;
  --rep-spinner-size: var(--rep-spinner-size-md);
  --rep-spinner-border: var(--rep-spinner-border-md);

  --rep-opacity-disabled: 0.65;
  --rep-transition-fast: 0.15s ease;

  --rep-shadow-dialog:
    0 20px 25px -5px rgba(0, 0, 0, 0.15),
    0 10px 10px -5px rgba(0, 0, 0, 0.08);

  /* A knob raised off the surface it rides, and a face pressed into one. */
  --rep-shadow-knob: 0 2px 4px rgba(0, 0, 0, 0.3);
  --rep-shadow-well: inset 0 2px 2px rgba(0, 0, 0, 0.1);

  /* ---- Button size scale ----
     Primitive tiers. `md` is the app-wide control; `sm` is its dense variant.
     The `touch-*` tiers are for controls driven by a thumb on a phone and by a
     pointer everywhere else, the quiz above all. */
  --rep-btn-height-md: 46px;
  --rep-btn-padding-x-md: 24px;
  --rep-btn-font-size-md: 1rem;
  --rep-btn-min-width-md: 180px;
  --rep-btn-radius-md: 12px;
  --rep-btn-icon-size-md: 1.25rem;

  /* Extra small: a badge-sized control that rides on a thumbnail. */
  --rep-btn-height-xs: 22px;
  --rep-btn-padding-x-xs: 6px;
  --rep-btn-font-size-xs: 0.75rem;
  --rep-btn-min-width-xs: 0;
  --rep-btn-icon-size-xs: 0.85rem;

  --rep-btn-height-sm: 34px;
  --rep-btn-padding-x-sm: 14px;
  --rep-btn-font-size-sm: 0.875rem;
  --rep-btn-min-width-sm: 0;

  /* A dismiss tucked into a corner: the smallest target a thumb still hits. */
  --rep-btn-height-touch-xs: 44px;
  --rep-btn-padding-x-touch-xs: 12px;
  --rep-btn-font-size-touch-xs: 1rem;
  --rep-btn-icon-size-touch-xs: 1.5rem;

  /* Secondary thumb target: several share a row. */
  --rep-btn-height-touch-sm: 50px;
  --rep-btn-padding-x-touch-sm: 12px;
  --rep-btn-font-size-touch-sm: 1rem;
  --rep-btn-radius-touch-sm: 12px;
  --rep-btn-icon-size-touch-sm: 1.4rem;

  /* The verdict buttons: the one decision every question ends on. */
  --rep-btn-height-touch-md: 74px;
  --rep-btn-padding-x-touch-md: 16px;
  --rep-btn-font-size-touch-md: 1.25rem;
  --rep-btn-radius-touch-md: 14px;
  --rep-btn-icon-size-touch-md: 1.95rem;

  /* Read Question / Get Answer: aimed at without looking. */
  --rep-btn-height-touch-lg: 120px;
  --rep-btn-padding-x-touch-lg: 24px;
  --rep-btn-font-size-touch-lg: 1.25rem;
  --rep-btn-radius-touch-lg: 18px;
  --rep-btn-icon-size-touch-lg: 2.5rem;

  /* A touch target is sized by its height, never stretched to a minimum. */
  --rep-btn-min-width-touch: 0;

  /* An icon-only control is a circle, whichever tier it is wearing. */
  --rep-btn-radius-round: var(--rep-radius-circle);

  /* Semantic aliases. Size modifiers rebind these and nothing else. */
  --rep-btn-height: var(--rep-btn-height-md);
  --rep-btn-padding-x: var(--rep-btn-padding-x-md);
  --rep-btn-font-size: var(--rep-btn-font-size-md);
  --rep-btn-min-width: var(--rep-btn-min-width-md);
  --rep-btn-radius: var(--rep-btn-radius-md);
  --rep-btn-icon-size: var(--rep-btn-icon-size-md);

  --rep-btn-gap: 8px;
  --rep-btn-row-gap: 12px;
  --rep-btn-cluster-basis: 150px;

  /* A bar's title that opens what it heads: the category picker's, a question's. */
  --rep-disclosure-padding-y: 3px;
  --rep-disclosure-padding-x: 7px;
  --rep-disclosure-font-size: 0.9rem;
  --rep-disclosure-chevron-size: 7px;
  --rep-disclosure-hover-bg: var(--rep-intent-overlay-bg);

  /* Inert while a label fits on one line, because the tier height wins; it is
     what keeps a wrapped label off the button's edges. */
  --rep-btn-padding-y: 8px;
  --rep-btn-line-height: 1;
  --rep-btn-line-height-wrap: 1.2;

  --rep-btn-font-weight: 700;
  --rep-btn-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  --rep-btn-shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.1);
  --rep-btn-transition:
    transform 120ms ease,
    opacity 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease;

  /* ---- Toasts ----
     A timed toast lives for `lifetime`, fading out over the last `fade` of it.
     A message taller than `message-max-height` scrolls inside its toast. */
  --rep-toast-lifetime: 7s;
  --rep-toast-fade-duration: 3s;
  --rep-toast-message-max-height: 30vh;
}

/* Above this width the quiz is driven by a pointer on a page that is no longer
   the whole screen, so thumb-sized targets are wasted height. Collapsing the
   touch tiers onto `md` here is what makes the desktop quiz use the same
   controls as the rest of the app, without a single component-level @media. */
@media (min-width: 900px) {
  :root {
    --rep-btn-height-touch-sm: var(--rep-btn-height-md);
    --rep-btn-padding-x-touch-sm: var(--rep-btn-padding-x-md);
    --rep-btn-font-size-touch-sm: var(--rep-btn-font-size-md);
    --rep-btn-radius-touch-sm: var(--rep-btn-radius-md);
    --rep-btn-icon-size-touch-sm: var(--rep-btn-icon-size-md);

    --rep-btn-height-touch-md: var(--rep-btn-height-md);
    --rep-btn-padding-x-touch-md: var(--rep-btn-padding-x-md);
    --rep-btn-font-size-touch-md: var(--rep-btn-font-size-md);
    --rep-btn-radius-touch-md: var(--rep-btn-radius-md);
    --rep-btn-icon-size-touch-md: var(--rep-btn-icon-size-md);

    --rep-btn-height-touch-lg: var(--rep-btn-height-md);
    --rep-btn-padding-x-touch-lg: var(--rep-btn-padding-x-md);
    --rep-btn-font-size-touch-lg: var(--rep-btn-font-size-md);
    --rep-btn-radius-touch-lg: var(--rep-btn-radius-md);
    --rep-btn-icon-size-touch-lg: var(--rep-btn-icon-size-md);

    /* A corner dismiss drops back to the badge-sized `xs`, not to `md`. */
    --rep-btn-height-touch-xs: var(--rep-btn-height-xs);
    --rep-btn-padding-x-touch-xs: var(--rep-btn-padding-x-xs);
    --rep-btn-font-size-touch-xs: var(--rep-btn-font-size-xs);
    --rep-btn-icon-size-touch-xs: var(--rep-btn-icon-size-xs);
  }
}