/* Film Hub product tokens. Brand values are transcribed from the Cabrillo College
   Design System token files (00 College-Wide/Cabrillo Design/tokens); product
   additions follow docs/DESIGN-SYSTEM.md. This file and the brand files are the
   only places a color, size, radius, shadow or duration may be written (RULES F-018). */
:root {
  /* Brand palette (colors.css) */
  --cab-blue: #3861e3;
  --cab-blue-light: #78bde8;
  --cab-blue-dark: #0d2d7c;
  --cab-white: #ffffff;
  --cab-orange: #ff5408;
  --cab-peach: #ffcfc5;
  --cab-yellow: #fff066;
  --cab-blue-xlight: #d3e9f4;
  --cap-green-light: #abf9a0;
  --cab-ink: #20221d;
  --cab-ink-80: rgba(32, 34, 29, .8);
  --cab-ink-70: rgba(32, 34, 29, .7);
  --cab-ink-66: rgba(32, 34, 29, .66);
  --cab-ink-50: rgba(32, 34, 29, .5);
  --cab-ink-45: rgba(32, 34, 29, .45);
  --cab-ink-40: rgba(32, 34, 29, .4);
  --cab-hairline: #dbe7f0;
  --cab-hairline-soft: #e9f1f7;
  --cab-surface-tint: #f4f9fc;

  /* Semantic aliases (colors.css) */
  --text-heading: var(--cab-blue-dark);
  --text-body: var(--cab-ink);
  --text-muted: var(--cab-ink-66);
  --text-link: var(--cab-blue);
  --text-link-hover: var(--cab-blue-dark);
  --text-label: var(--cab-blue);
  --surface-page: var(--cab-surface-tint);  /* draft 9: the brand tint canvas under white cards */
  --surface-card: var(--cab-white);
  --surface-hover: #fbfdff;
  --surface-muted: #edf6fb;     /* Extra Light Blue at 40 percent: quiet panels, hover fills */
  --surface-brand-tint: rgba(56, 97, 227, .08); /* Bright Blue at 8 percent: sidebar hover (draft 9) */
  --surface-brand: var(--cab-blue-dark);
  --border-subtle: var(--cab-hairline);
  --border-soft: var(--cab-hairline-soft);
  --action-primary: var(--cab-orange);
  --action-primary-hover: #e04703;
  --action-secondary: var(--cab-blue);
  --action-secondary-hover: var(--cab-blue-dark);

  /* Status tints (DESIGN-SYSTEM.md section 2, draft 6: quarter strength) */
  --status-neutral-bg: #eef5fa;   --status-neutral-text: var(--cab-ink-80);
  --status-info-bg: #eef5fa;      --status-info-text: var(--cab-ink-80);
  --status-progress-bg: #eef5fa;  --status-progress-text: var(--cab-ink-80);
  --status-success-bg: #eafde7;   --status-success-text: #1f5c2a;
  --status-attention-bg: #fff3f1; --status-attention-text: #8a2c00;
  --dot-on: #2e9e4a;
  --danger: #8a2c00;             /* the one destructive button; same ink as attention */
  --danger-hover: #6b2200;

  /* Shape (radius.css, elevation) */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --radius-card: var(--radius-none);
  --shadow-none: none;
  --shadow-raised: 0 8px 24px rgba(13, 45, 124, .12);   /* menus only */
  --shadow-overlay: 0 16px 48px rgba(13, 45, 124, .18); /* dialogs and panels only */

  /* Type (typography.css, fonts.css) */
  --font-sans: 'TT Interphases', 'Fira Sans', system-ui, -apple-system, sans-serif;
  --font-mono-brand: 'TT Interphases Mono', 'Fira Code', ui-monospace, Menlo, monospace;

  /* Controls and density */
  --control-height: 34px;
  --control-height-hero: 36px;
  --control-height-phone: 44px;
  --control-pad: 6px 16px;
  --field-height: 34px;
  --app-header: 56px;
  --row-pad: 16px;
  --card-pad: 24px;
  --card-pad-phone: 20px;
  --content-max: 72rem;
  --reading-max: 66ch;

  /* Motion (motion.css) */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --shift-press: 1px;
}
/* Authenticated portal only: September 19 minimalist policy. Public tokens stay intact. */
.fh-portal {
  --portal-control-radius: 5px;
  --portal-space: 12px;
  --portal-space-large: 20px;
  --portal-control-height: 36px;
  --portal-field-min: 140px;
  --portal-action-min: 150px;
  --portal-panel-pad: 24px;
  --portal-control-pad: 8px 12px;
  --surface-page: #f7f8fa;
  --surface-muted: #f1f3f5;
  --border-subtle: #d8dde3;
  --border-soft: #e8ebef;
  --action-primary: #0d2d7c;
  --action-primary-hover: #163e98;
  --bg: var(--surface-page);
  --surface-tint: var(--surface-muted);
  --hairline: var(--border-subtle);
  --line: var(--border-subtle);
  --action: var(--action-primary);
  --action-hover: var(--action-primary-hover);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}