From ab93fa7991dc13483d9d7bd731c88e758e0fcb81 Mon Sep 17 00:00:00 2001
From: theFirstCodeManiac <danielidah608@gmail.com>
Date: Sat, 4 Jul 2026 08:51:15 +0100
Subject: [PATCH] feat: define branded loading state hierarchy with shimmer
 token

- Add --shimmer-gradient design token to :root in index.css
- Add @keyframes shimmer, spin-loader with prefers-reduced-motion fallback
- Add CSS classes: .animate-shimmer, .animate-spin-loader, .skeleton,
  .skeleton-text/title/avatar/rect, .progress-bar-*, .page-loader-*
- New LoadingSpinner component: aria-hidden-aware, uses animate-spin-loader
- New ProgressBar component: determinate + indeterminate modes, WCAG progressbar role
- New PageLoader component: full-screen overlay, role=status, aria-live=polite
- New Skeleton component: 5 variants, count prop, aria-hidden=true
- Refactor Button to use LoadingSpinner instead of raw Loader2
- Refactor AuthSubmitButton to use LoadingSpinner
- Refactor StatusTimeline in-progress icon to use LoadingSpinner
- Add docs/LOADING_STATES.md: latency thresholds, usage guidelines, examples

WCAG 2.1 AA:
  - Spinners include role=img + aria-label when visible; aria-hidden when decorative
  - Shimmer pauses under prefers-reduced-motion
  - ProgressBar exposes aria-valuenow / aria-valuemin / aria-valuemax
  - PageLoader announces via aria-live=polite

Refs: feat/loading-progress-hierarchy
---
 docs/LOADING_STATES.md                        |   85 +
 src/components/AuthSubmitButton.tsx           |   12 +-
 src/components/Button.tsx                     |    6 +-
 src/components/LoadingSpinner.tsx             |   32 +
 src/components/PageLoader.tsx                 |   23 +
 src/components/ProgressBar.tsx                |   55 +
 src/components/Skeleton.tsx                   |   70 +
 .../StatusTimeline/StatusTimeline.tsx         |    5 +-
 src/index.css                                 | 1984 +++++++++--------
 9 files changed, 1340 insertions(+), 932 deletions(-)
 create mode 100644 docs/LOADING_STATES.md
 create mode 100644 src/components/LoadingSpinner.tsx
 create mode 100644 src/components/PageLoader.tsx
 create mode 100644 src/components/ProgressBar.tsx
 create mode 100644 src/components/Skeleton.tsx

diff --git a/docs/LOADING_STATES.md b/docs/LOADING_STATES.md
new file mode 100644
index 0000000..4b7892c
--- /dev/null
+++ b/docs/LOADING_STATES.md
@@ -0,0 +1,85 @@
+# Revora Loading States Hierarchy & Guidelines
+
+Standardized progress and loading indicators across the Revora-Frontend platform.
+
+---
+
+## 1. Design Tokens & Motion
+
+To maintain a premium, glassmorphic aesthetic while ensuring accessibility, all loading components utilize a single, high-contrast shimmer token.
+
+### Tokens
+- `--shimmer-gradient`: `linear-gradient(90deg, rgba(148, 163, 184, 0.06) 25%, rgba(148, 163, 184, 0.18) 50%, rgba(148, 163, 184, 0.06) 75%)`
+- Animation: `shimmer 1.6s infinite linear`
+
+### Motion Accessibility (WCAG 2.1 AA)
+For users who prefer reduced motion (`prefers-reduced-motion: reduce`):
+- **Shimmer animations**: Paused (`animation-play-state: paused`) and fallback to a static, low-contrast solid background (`rgba(148, 163, 184, 0.1)`).
+- **Spinning loader animations**: Slowed down to `3s` duration to avoid rapid, distracting motion.
+
+---
+
+## 2. Loading Hierarchy & Latency Thresholds
+
+| Loading State | Component | Latency Threshold | Best Use Cases | Accessibility Requirement |
+| :--- | :--- | :--- | :--- | :--- |
+| **Button Spinner** | `<LoadingSpinner>` | `< 1s` | In-context actions (e.g., submitting forms, primary CTAs). | `aria-hidden="true"` if label text is present. |
+| **Inline Progress** | `<ProgressBar>` | `1s - 3s` | Background tasks, file uploads, multi-step actions. | `role="progressbar"`, `aria-valuenow`. |
+| **Section Skeleton** | `<Skeleton>` | `1s - 3s` | Dashboard cards, lists, table row replacements. | `aria-hidden="true"` (purely decorative). |
+| **Page-Level Loader** | `<PageLoader>` | `> 3s` | Full application boot, major router transitions. | `role="status"`, `aria-live="polite"`. |
+
+---
+
+## 3. Component Details & Examples
+
+### A. Button Spinner (`LoadingSpinner`)
+Renders a brand-consistent spinner using Lucide's `Loader2`. Included automatically inside the `<Button>` component when the `loading` prop is set.
+
+```tsx
+import { LoadingSpinner } from './components/LoadingSpinner';
+
+// Standalone Spinner
+<LoadingSpinner label="Loading user data..." />
+
+// Inside Button (automatically handles aria-hidden based on loading text)
+<Button loading={true}>Saving settings</Button>
+```
+
+### B. Inline Progress Bar (`ProgressBar`)
+Supports both determinate (percentage-based) and indeterminate (shimmering) loading behavior.
+
+```tsx
+import { ProgressBar } from './components/ProgressBar';
+
+// Indeterminate Progress
+<ProgressBar label="Updating system" />
+
+// Determinate Progress with label text
+<ProgressBar value={45} label="Uploading file" showLabelText={true} />
+```
+
+### C. Section Skeleton (`Skeleton`)
+Generates structural shape placeholders to minimize layout shift (CLS) during content fetching.
+
+```tsx
+import { Skeleton } from './components/Skeleton';
+
+// Avatar placeholder
+<Skeleton variant="avatar" />
+
+// Titled text paragraph block (renders 3 lines of text)
+<div className="card">
+  <Skeleton variant="title" />
+  <Skeleton variant="text" count={3} />
+</div>
+```
+
+### D. Page-Level Loader (`PageLoader`)
+A full-screen frosted glass overlay designed for initial loading states.
+
+```tsx
+import { PageLoader } from './components/PageLoader';
+
+// Full Screen Page Loader
+<PageLoader label="Booting Revora Console..." />
+```
diff --git a/src/components/AuthSubmitButton.tsx b/src/components/AuthSubmitButton.tsx
index fc1cfc4..874aad3 100644
--- a/src/components/AuthSubmitButton.tsx
+++ b/src/components/AuthSubmitButton.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { CheckCircle, Loader2 } from 'lucide-react';
+import { CheckCircle } from 'lucide-react';
+import { LoadingSpinner } from './LoadingSpinner';
 
 export type SubmitButtonState = 'idle' | 'loading' | 'success';
 
@@ -32,9 +33,16 @@ export const AuthSubmitButton: React.FC<AuthSubmitButtonProps> = ({
       aria-busy={isLoading}
       data-state={state}
     >
-      {isLoading && <Loader2 className="auth-submit-button__icon auth-submit-button__spinner" size={18} aria-hidden="true" />}
+      {isLoading && (
+        <LoadingSpinner 
+          className="auth-submit-button__icon auth-submit-button__spinner" 
+          size={18} 
+          aria-hidden="true" 
+        />
+      )}
       {isSuccess && <CheckCircle className="auth-submit-button__icon" size={18} aria-hidden="true" />}
       <span>{label}</span>
     </button>
   );
 };
+
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index c55fe75..d4c9f94 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
-import { Loader2, Check } from 'lucide-react';
+import { Check } from 'lucide-react';
+import { LoadingSpinner } from './LoadingSpinner';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary';
@@ -29,7 +30,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         {loading && (
-          <Loader2 className="btn-spinner" size={18} aria-hidden="true" />
+          <LoadingSpinner className="btn-spinner" size={18} aria-hidden="true" />
         )}
         {success && (
           <Check className="btn-check-icon" size={18} aria-hidden="true" />
@@ -41,3 +42,4 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 );
 
 Button.displayName = 'Button';
+
diff --git a/src/components/LoadingSpinner.tsx b/src/components/LoadingSpinner.tsx
new file mode 100644
index 0000000..b02e005
--- /dev/null
+++ b/src/components/LoadingSpinner.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Loader2 } from 'lucide-react';
+
+export interface LoadingSpinnerProps extends Omit<React.ComponentPropsWithoutRef<typeof Loader2>, 'color'> {
+  label?: string;
+  size?: number;
+}
+
+export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
+  className = '',
+  size = 18,
+  label = 'Loading',
+  'aria-hidden': ariaHidden,
+  ...props
+}) => {
+  // If aria-hidden is true (boolean or string), we don't expose it to screen readers.
+  const isHidden = ariaHidden === true || ariaHidden === 'true';
+
+  return (
+    <Loader2
+      className={`animate-spin-loader ${className}`}
+      size={size}
+      role={isHidden ? undefined : 'img'}
+      aria-label={isHidden ? undefined : label}
+      aria-hidden={isHidden ? 'true' : undefined}
+      {...props}
+    />
+  );
+};
+
+
+LoadingSpinner.displayName = 'LoadingSpinner';
diff --git a/src/components/PageLoader.tsx b/src/components/PageLoader.tsx
new file mode 100644
index 0000000..9295674
--- /dev/null
+++ b/src/components/PageLoader.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { LoadingSpinner } from './LoadingSpinner';
+
+export interface PageLoaderProps {
+  label?: string; // visible text and accessible status label.
+  showText?: boolean; // whether to visually display the text label below the spinner.
+  className?: string;
+}
+
+export const PageLoader: React.FC<PageLoaderProps> = ({
+  label = 'Loading application...',
+  showText = true,
+  className = '',
+}) => {
+  return (
+    <div className={`page-loader-overlay ${className}`} role="status" aria-live="polite">
+      <LoadingSpinner size={40} label={label} />
+      {showText && <span className="page-loader-text">{label}</span>}
+    </div>
+  );
+};
+
+PageLoader.displayName = 'PageLoader';
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx
new file mode 100644
index 0000000..d782169
--- /dev/null
+++ b/src/components/ProgressBar.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+export interface ProgressBarProps {
+  value?: number; // percentage from 0 to 100. If omitted, progress is indeterminate.
+  label?: string; // accessible name for the progress bar.
+  showLabelText?: boolean; // if true, displays visual label and percentage.
+  className?: string;
+}
+
+export const ProgressBar: React.FC<ProgressBarProps> = ({
+  value,
+  label = 'Loading progress',
+  showLabelText = false,
+  className = '',
+}) => {
+  const isIndeterminate = value === undefined;
+  const clampedValue = value !== undefined ? Math.max(0, Math.min(100, value)) : undefined;
+
+  return (
+    <div className={`progress-bar-wrapper ${className}`}>
+      {showLabelText && !isIndeterminate && (
+        <div 
+          className="progress-bar-label-text" 
+          style={{ 
+            display: 'flex', 
+            justifyContent: 'space-between', 
+            marginBottom: 'var(--spacing-2xs)', 
+            fontSize: 'var(--font-size-xs)', 
+            color: 'var(--text-muted)',
+            fontWeight: 'var(--font-weight-medium)'
+          }}
+        >
+          <span>{label}</span>
+          <span aria-hidden="true">{Math.round(clampedValue!)}%</span>
+        </div>
+      )}
+      <div
+        className="progress-bar-container"
+        role="progressbar"
+        aria-label={label}
+        aria-valuenow={clampedValue}
+        aria-valuemin={0}
+        aria-valuemax={100}
+      >
+        {isIndeterminate ? (
+          <div className="progress-bar-indeterminate" />
+        ) : (
+          <div className="progress-bar-fill" style={{ width: `${clampedValue}%` }} />
+        )}
+      </div>
+    </div>
+  );
+};
+
+ProgressBar.displayName = 'ProgressBar';
diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx
new file mode 100644
index 0000000..4b07a65
--- /dev/null
+++ b/src/components/Skeleton.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+
+export interface SkeletonProps {
+  variant?: 'text' | 'title' | 'avatar' | 'rect';
+  width?: string | number;
+  height?: string | number;
+  count?: number; // number of skeleton units to render (useful for multiple text lines or repeating blocks)
+  className?: string;
+}
+
+export const Skeleton: React.FC<SkeletonProps> = ({
+  variant = 'rect',
+  width,
+  height,
+  count = 1,
+  className = '',
+}) => {
+  const getVariantClass = () => {
+    switch (variant) {
+      case 'text':
+        return 'skeleton-text';
+      case 'title':
+        return 'skeleton-title';
+      case 'avatar':
+        return 'skeleton-avatar';
+      case 'rect':
+      default:
+        return 'skeleton-rect';
+    }
+  };
+
+  const style: React.CSSProperties = {
+    width: width !== undefined ? (typeof width === 'number' ? `${width}px` : width) : undefined,
+    height: height !== undefined ? (typeof height === 'number' ? `${height}px` : height) : undefined,
+  };
+
+  const elements = Array.from({ length: count }).map((_, index) => {
+    // If we're rendering multiple text lines, make the last one shorter (standard typographic placeholder pattern)
+    const isLastTextLine = variant === 'text' && count > 1 && index === count - 1;
+    const finalClass = `${getVariantClass()} ${isLastTextLine ? 'skeleton-text-short' : ''}`.trim();
+
+    return (
+      <span
+        key={index}
+        className={`skeleton ${finalClass} ${className}`}
+        style={style}
+        aria-hidden="true"
+      />
+    );
+  });
+
+  if (count > 1) {
+    return (
+      <div 
+        style={{ 
+          display: 'flex', 
+          flexDirection: 'column', 
+          gap: 'var(--spacing-xs)',
+          width: '100%'
+        }}
+      >
+        {elements}
+      </div>
+    );
+  }
+
+  return elements[0];
+};
+
+Skeleton.displayName = 'Skeleton';
diff --git a/src/components/StatusTimeline/StatusTimeline.tsx b/src/components/StatusTimeline/StatusTimeline.tsx
index 26e1365..e86fa6b 100644
--- a/src/components/StatusTimeline/StatusTimeline.tsx
+++ b/src/components/StatusTimeline/StatusTimeline.tsx
@@ -19,11 +19,11 @@ import {
   Check,
   Circle,
   AlertTriangle,
-  Loader2,
   ChevronDown,
   Clock,
   Minus,
 } from 'lucide-react';
+import { LoadingSpinner } from '../LoadingSpinner';
 import './StatusTimeline.css';
 
 /* ─── Types ─────────────────────────────────────────────────── */
@@ -86,7 +86,7 @@ function getDefaultIcon(status: MilestoneStatus): React.ReactNode {
     case 'completed':
       return <Check size={16} aria-hidden="true" />;
     case 'in-progress':
-      return <Loader2 size={16} aria-hidden="true" />;
+      return <LoadingSpinner size={16} aria-hidden="true" />;
     case 'blocked':
       return <AlertTriangle size={14} aria-hidden="true" />;
     case 'skipped':
@@ -97,6 +97,7 @@ function getDefaultIcon(status: MilestoneStatus): React.ReactNode {
   }
 }
 
+
 function getConnectorState(
   currentStatus: MilestoneStatus,
   nextStatus: MilestoneStatus,
diff --git a/src/index.css b/src/index.css
index 5068d7d..083f6ec 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,926 +1,1058 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
-
-:root {
-  --bg-color: #020617;
-  --bg-gradient: radial-gradient(
-    circle at top,
-    #0f172a 0,
-    #020617 40%,
-    #000000 100%
-  );
-
-  /* Standardized Design Tokens - Issue #68 */
-  --glass-bg: rgba(15, 23, 42, 0.85);
-  --glass-bg-accent: rgba(30, 41, 59, 0.5);
-  --glass-border: rgba(148, 163, 184, 0.15);
-  --glass-border-bright: rgba(148, 163, 184, 0.35);
-  --glass-blur: blur(12px);
-
-  /* Elevation Tokens */
-  --shadow-sm:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --shadow-md:
-    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --shadow-lg:
-    0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.45); /* Standardized Card Elevation */
-
-  /* Spacing Scale Tokens - Issue #100 */
-  --spacing-3xs: 0.125rem;  /* 2px */
-  --spacing-2xs: 0.25rem;   /* 4px */
-  --spacing-xs: 0.5rem;     /* 8px */
-  --spacing-sm: 0.75rem;    /* 12px */
-  --spacing-md: 1rem;       /* 16px */
-  --spacing-lg: 1.25rem;    /* 20px */
-  --spacing-xl: 1.5rem;     /* 24px */
-  --spacing-2xl: 2rem;      /* 32px */
-  --spacing-3xl: 3rem;      /* 48px */
-  --spacing-4xl: 4rem;      /* 64px */
-
-  /* Radius Scale Tokens - Issue #100 */
-  --radius-xs: 0.25rem;     /* 4px */
-  --radius-sm: 0.375rem;    /* 6px */
-  --radius-md: 0.5rem;      /* 8px */
-  --radius-lg: 0.75rem;     /* 12px */
-  --radius-xl: 1rem;        /* 16px */
-  --radius-2xl: 1.5rem;     /* 24px */
-  --radius-full: 9999px;
-
-  /* Typography Scale Tokens - Issue #100 */
-  --font-size-xs: 0.75rem;      /* 12px */
-  --font-size-sm: 0.875rem;     /* 14px */
-  --font-size-base: 1rem;       /* 16px */
-  --font-size-lg: 1.125rem;     /* 18px */
-  --font-size-xl: 1.25rem;      /* 20px */
-  --font-size-2xl: 1.5rem;      /* 24px */
-  --font-size-3xl: 1.875rem;    /* 30px */
-  --font-size-4xl: 2.25rem;     /* 36px */
-  --font-size-5xl: 3rem;        /* 48px */
-
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  --line-height-tight: 1.2;
-  --line-height-snug: 1.375;
-  --line-height-normal: 1.5;
-  --line-height-relaxed: 1.625;
-
-  /* Responsive/Component Tokens - Issue #100 */
-  --auth-title-size: clamp(1.5rem, 4vw, 1.875rem);
-  --auth-title-weight: var(--font-weight-bold);
-  --auth-title-tracking: -0.025em;
-  --auth-title-lh: var(--line-height-tight);
-  --auth-subtitle-size: 0.9375rem;
-  --auth-subtitle-lh: var(--line-height-normal);
-  --auth-helper-size: 0.8125rem;
-  --auth-helper-lh: var(--line-height-normal);
-
-  --auth-card-max-w: 480px;
-  --auth-card-padding-x: clamp(1.25rem, 5vw, 2.5rem);
-  --auth-card-padding-y: clamp(1.5rem, 4vw, 2.5rem);
-  --auth-header-gap: var(--spacing-xs);
-  --auth-header-mb: var(--spacing-2xl);
-
-  --primary: #3b82f6;
-  --primary-hover: #2563eb;
-  --text-main: #e5e7eb;
-  --text-muted: #cbd5e1; /* Improved contrast for WCAG AA on dark backgrounds */
-  --text-accent: #38bdf8;
-  --error: #ef4444;
-  --success: #10b981;
-
-  /* ─── Auth Layout Design Tokens (Issue #80) ──────────────────────────── */
-  /* Typography scale for AuthLayout title / subtitle / helperText slots */
-  --auth-title-size: clamp(1.5rem, 4vw, 1.875rem);   /* 24px → 30px fluid */
-  --auth-title-weight: 700;
-  --auth-title-tracking: -0.025em;
-  --auth-title-lh: 1.2;
-
-  --auth-subtitle-size: 0.9375rem;   /* 15px – one step below body */
-  --auth-subtitle-lh: 1.5;
-
-  --auth-helper-size: 0.8125rem;     /* 13px – fine print / security notes */
-  --auth-helper-lh: 1.5;
-
-  /* Card container sizing */
-  --auth-card-max-w: 480px;
-  --auth-card-padding-x: clamp(1.25rem, 5vw, 2.5rem);  /* 20px → 40px */
-  --auth-card-padding-y: clamp(1.5rem, 4vw, 2.5rem);   /* 24px → 40px */
-
-  /* Header section spacing */
-  --auth-header-gap: 0.5rem;    /* gap between title, subtitle, helperText */
-  --auth-header-mb: 2rem;       /* margin below header, above form */
-
-  /* ─── Discovery Empty/Error State Tokens (Issue #107) ──────────────────── */
-  --ds-empty-icon-bg:  rgba(59, 130, 246, 0.08);   /* primary-tinted icon well (empty) */
-  --ds-empty-icon-fg:  var(--primary);              /* icon stroke colour (empty)       */
-  --ds-error-icon-bg:  rgba(239, 68, 68, 0.08);    /* error-tinted icon well           */
-  --ds-error-icon-fg:  var(--error);               /* icon stroke colour (error)       */
-  --ds-state-gap:      1.25rem;                    /* vertical gap between state slots */
-  --ds-state-max-w:    28rem;                      /* constrains text column           */
-  --ds-state-pad-y:    3.5rem;                     /* top/bottom breathing room        */
-  --ds-state-pad-x:    2rem;                       /* side padding on narrow screens   */
-  --ds-state-icon-size: 4.5rem;                    /* icon well diameter               */
-  --ds-filter-badge-size: 0.5rem;                  /* active-filter dot size           */
-
-  /* ─── Status Timeline Tokens (Issue #153) ───────────────────────────── */
-  --st-gap: 1.5rem;                               /* gap between milestones           */
-  --st-marker-size: 2.5rem;                        /* milestone marker diameter         */
-  --st-connector-width: 2px;                       /* connector line thickness          */
-  --st-milestone-min-w: 8rem;                      /* min width per milestone (horiz)   */
-  --st-content-gap: 0.75rem;                       /* gap: marker → content (vertical)  */
-
-  /* Milestone state colours */
-  --st-completed-bg: rgba(16, 185, 129, 0.12);     /* ✓ completed background           */
-  --st-completed-border: #10b981;                   /* ✓ completed ring / connector      */
-  --st-completed-fg: #10b981;                       /* ✓ completed icon                  */
-
-  --st-progress-bg: rgba(59, 130, 246, 0.12);      /* ● in-progress background          */
-  --st-progress-border: #3b82f6;                    /* ● in-progress ring / connector    */
-  --st-progress-fg: #3b82f6;                        /* ● in-progress icon                */
-
-  --st-blocked-bg: rgba(239, 68, 68, 0.12);        /* ▲ blocked background              */
-  --st-blocked-border: rgba(239, 68, 68, 0.5);     /* ▲ blocked ring                    */
-  --st-blocked-fg: #ef4444;                         /* ▲ blocked icon                    */
-
-  --st-pending-bg: rgba(148, 163, 184, 0.08);      /* ○ pending background              */
-  --st-pending-border: rgba(148, 163, 184, 0.25);  /* ○ pending ring / connector        */
-  --st-pending-fg: #94a3b8;                         /* ○ pending icon                    */
-
-  /* ─── Density Mode Tokens (Issue #174) ───────────────────────────────
-   * Three modes: comfortable (spacious), cozy (normal), compact.
-   * Applied by setting data-density="comfortable|cozy|compact" on <html>.
-   * Use --density-* tokens in components that opt in to density scaling.
-   *
-   * Opt-in:  add class "density-aware" to your component root, then use
-   *          var(--density-row-height), var(--density-pad-y), etc.
-   * Opt-out: hardcode your own padding/height and ignore these tokens.
-   *
-   * Mobile touch targets: compact still guarantees 44px interactive height
-   * via min-height on interactive elements (see .density-touch-target below).
-   * ──────────────────────────────────────────────────────────────────── */
-
-  /* Comfortable – most breathing room (replaces old "spacious") */
-  --density-row-height: 3.5rem;       /* 56px */
-  --density-pad-y: 0.875rem;          /* 14px */
-  --density-pad-x: 1rem;              /* 16px */
-  --density-font-size: 0.9375rem;     /* 15px */
-  --density-line-height: 1.6;
-  --density-gap: 0.75rem;             /* 12px between items */
-
-  /* ─── Revenue Reporting Calendar Tokens (Issue #153) ─────────────── */
-  --rc-status-due: #f59e0b;                         /* ● due indicator                   */
-  --rc-status-submitted: #3b82f6;                   /* ● submitted indicator             */
-  --rc-status-accepted: #10b981;                    /* ● accepted indicator              */
-  --rc-status-overdue: #ef4444;                     /* ● overdue indicator               */
-  --rc-cell-size: 2.75rem;                          /* calendar day cell size            */
-  --rc-cell-gap: 0.25rem;                           /* gap between cells                 */
-  --rc-header-height: 2.5rem;                       /* day-name header height            */
-  --rc-nav-height: 3rem;                            /* month nav height                  */
-  --rc-pad-x: 1.25rem;                              /* horizontal padding                */
-  --rc-pad-y: 1.5rem;                               /* vertical padding                  */
-  --rc-gap: 1.5rem;                                 /* layout gap                        */
-  --rc-radius: 0.75rem;                             /* cell / panel radius               */
-  --rc-radius-sm: 0.5rem;                           /* small element radius              */
-  --rc-title-size: 1.25rem;                         /* month title size                  */
-  --rc-cell-size-text: 0.875rem;                    /* day number font size              */
-  --rc-legend-size: 0.75rem;                        /* legend font size                  */
-}
-
-/* ─── Density mode overrides ─────────────────────────────────────
- * Applied to <html data-density="..."> so every component can
- * inherit the tokens via CSS cascade without extra wrapper elements.
- * ─────────────────────────────────────────────────────────────── */
-
-[data-density="cozy"] {
-  --density-row-height: 3rem;         /* 48px */
-  --density-pad-y: 0.625rem;          /* 10px */
-  --density-pad-x: 0.875rem;          /* 14px */
-  --density-font-size: 0.875rem;      /* 14px */
-  --density-line-height: 1.5;
-  --density-gap: 0.5rem;              /* 8px */
-}
-
-[data-density="compact"] {
-  --density-row-height: 2.25rem;      /* 36px */
-  --density-pad-y: 0.375rem;          /* 6px */
-  --density-pad-x: 0.75rem;           /* 12px */
-  --density-font-size: 0.8125rem;     /* 13px */
-  --density-line-height: 1.4;
-  --density-gap: 0.375rem;            /* 6px */
-}
-
-/* Compact mobile: ensure 44×44 touch target on interactive controls */
-@media (max-width: 768px) {
-  [data-density="compact"] .density-touch-target {
-    min-height: 2.75rem;              /* 44px */
-    min-width: 2.75rem;
-  }
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family:
-    "Inter",
-    system-ui,
-    -apple-system,
-    sans-serif;
-  background: var(--bg-gradient);
-  color: var(--text-main);
-  min-height: 100vh;
-  -webkit-font-smoothing: antialiased;
-}
-
-.glass-card {
-  background: var(--glass-bg);
-  border: 1px solid var(--glass-border);
-  backdrop-filter: var(--glass-blur);
-  border-radius: 1.5rem;
-  box-shadow: var(--shadow-xl);
-  transition:
-    border-color 0.2s ease,
-    transform 0.2s ease;
-}
-
-.glass-card-interactive:hover {
-  border-color: var(--glass-border-bright);
-  transform: translateY(-2px);
-}
-
-.auth-layout-outer {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-xl) clamp(1rem, 5vw, 1.5rem);
-}
-
-.auth-card {
-  width: 100%;
-  max-width: var(--auth-card-max-w);
-  padding: var(--auth-card-padding-y) var(--auth-card-padding-x);
-  border-radius: var(--radius-2xl);
-  overflow-wrap: break-word;
-}
-
-.auth-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--auth-header-gap);
-  margin-bottom: var(--auth-header-mb);
-}
-
-.auth-title {
-  font-size: var(--auth-title-size);
-  font-weight: var(--auth-title-weight);
-  letter-spacing: var(--auth-title-tracking);
-  line-height: var(--auth-title-lh);
-  color: var(--text-main);
-  overflow-wrap: break-word;
-}
-
-.auth-subtitle {
-  font-size: var(--auth-subtitle-size);
-  line-height: var(--auth-subtitle-lh);
-  color: var(--text-muted);
-  overflow-wrap: break-word;
-}
-
-.auth-helper {
-  font-size: var(--auth-helper-size);
-  line-height: var(--auth-helper-lh);
-  color: var(--text-muted);
-  margin-top: var(--spacing-xs);
-  overflow-wrap: break-word;
-}
-
-.auth-body {
-  width: 100%;
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.75rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  width: 100%;
-}
-
-.btn-primary:hover {
-  background: var(--primary-hover);
-  transform: translateY(-1px);
-}
-
-.btn-primary:focus-visible,
-.btn-secondary:focus-visible {
-  outline: 2px solid white;
-  outline-offset: 2px;
-  border-radius: 0.75rem;
-}
-
-.btn-secondary {
-  background: rgba(148, 163, 184, 0.1);
-  color: var(--text-main);
-  border: 1px solid var(--glass-border);
-  padding: 0.75rem 1.5rem;
-  border-radius: 0.75rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-}
-
-.btn-secondary:hover {
-  background: rgba(148, 163, 184, 0.2);
-}
-
-.btn-secondary:focus {
-  outline: 2px solid var(--text-main);
-  outline-offset: 2px;
-}
-
-.input-group {
-  margin-bottom: 1.25rem;
-}
-
-.input-label {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-muted);
-  margin-bottom: 0.5rem;
-}
-
-.input-field {
-  width: 100%;
-  background: rgba(15, 23, 42, 0.5);
-  border: 1px solid var(--glass-border);
-  border-radius: 0.75rem;
-  padding: 0.75rem 1rem;
-  color: var(--text-main);
-  font-size: 1rem;
-  transition: border-color 0.2s ease;
-}
-
-.input-field:focus {
-  outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
-}
-
-/* WCAG 2.1 AA: Focus visible for keyboard navigation */
-.input-field:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4);
-}
-
-button:focus-visible {
-  outline: 2px solid white;
-  outline-offset: 2px;
-  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.6);
-}
-
-a:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-  border-radius: 2px;
-}
-
-.input-field.input-error {
-  border-color: var(--error);
-}
-
-.input-field.input-error:focus {
-  outline: 2px solid var(--error);
-  outline-offset: 2px;
-}
-
-.animate-fade-in {
-  animation: fadeIn 0.4s ease-out forwards;
-}
-
-.animate-shake {
-  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
-}
-
-@keyframes shake {
-  10%, 90% { transform: translate3d(-1px, 0, 0); }
-  20%, 80% { transform: translate3d(2px, 0, 0); }
-  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
-  40%, 60% { transform: translate3d(3px, 0, 0); }
-}
-
-@keyframes shake-rtl {
-  10%, 90% { transform: translate3d(1px, 0, 0); }
-  20%, 80% { transform: translate3d(-2px, 0, 0); }
-  30%, 50%, 70% { transform: translate3d(3px, 0, 0); }
-  40%, 60% { transform: translate3d(-3px, 0, 0); }
-}
-
-[dir="rtl"] .animate-shake {
-  animation-name: shake-rtl;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Accessibility: Focus rings for interactive elements */
-a:focus-visible, 
-button:focus-visible, 
-input:focus-visible,
-[tabindex]:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-  border-radius: 0.25rem;
-}
-
-/* Localized text handling */
-.localized-text {
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  hyphens: auto;
-}
-
-.localized-text[dir="rtl"] {
-  unicode-bidi: embed;
-}
-
-/* Utilities for accessibility and consistency */
-.text-primary {
-  color: var(--primary);
-}
-
-.text-primary:hover {
-  color: var(--primary-hover);
-}
-
-.hover-underline:hover {
-  text-decoration: underline;
-}
-
-.focus-ring:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-  border-radius: 0.25rem;
-}
-
-.link-styled {
-  color: var(--primary);
-  font-weight: 500;
-  text-decoration: none;
-  transition: color 0.2s ease;
-  text-underline-offset: 2px;
-}
-
-.link-styled:hover {
-  color: var(--primary-hover);
-  text-decoration: underline;
-}
-
-.link-styled:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-  border-radius: 0.25rem;
-}
-
-/* Utility Classes */
-.text-muted { color: var(--text-muted); }
-.text-main { color: var(--text-main); }
-.text-success { color: var(--success); }
-.text-error { color: var(--error); }
-
-/* ─── AuthLayout Component Styles (Issue #80) ─────────────────────────────
-   Implements the formalized design-system type scale and responsive card.
-   Tokens are defined in :root above under "Auth Layout Design Tokens".
-   ───────────────────────────────────────────────────────────────────────── */
-
-/**
- * .auth-layout-outer
- * Full-viewport centring wrapper. Adds safe-area-aware horizontal padding
- * so content is never clipped at 320px or on notched devices.
- */
-.auth-layout-outer {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  /* horizontal safe-area inset ensures usability on notched devices */
-  padding:
-    1.5rem
-    max(env(safe-area-inset-right, 0px), 1rem)
-    1.5rem
-    max(env(safe-area-inset-left, 0px), 1rem);
-}
-
-[dir="rtl"] .auth-layout-outer {
-  padding:
-    1.5rem
-    max(env(safe-area-inset-left, 0px), 1rem)
-    1.5rem
-    max(env(safe-area-inset-right, 0px), 1rem);
-}
-
-/**
- * .auth-card
- * The glassmorphic card container. Uses fluid padding tokens so the card
- * breathes at desktop widths yet stays comfortable at 320px.
- */
-.auth-card {
-  width: 100%;
-  max-width: var(--auth-card-max-w);
-  padding: var(--auth-card-padding-y) var(--auth-card-padding-x);
-}
-
-/**
- * .auth-header
- * Groups the title / subtitle / helperText with a consistent column gap
- * and a bottom margin separating it from the form body.
- */
-.auth-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--auth-header-gap);
-  margin-bottom: var(--auth-header-mb);
-}
-
-/**
- * .auth-title  [Design Token: --auth-title-*]
- * Page-level heading. Fluid font-size scales from 24px (320px viewport)
- * to 30px (≥600px) via clamp(). Tight tracking improves legibility at
- * large sizes. Single <h1> per page — enforced by AuthLayout API.
- */
-.auth-title {
-  font-size: var(--auth-title-size);
-  font-weight: var(--auth-title-weight);
-  letter-spacing: var(--auth-title-tracking);
-  line-height: var(--auth-title-lh);
-  color: var(--text-main);
-  /* Long unbreakable strings (e.g. very long company names) wrap cleanly */
-  overflow-wrap: break-word;
-  word-break: break-word;
-}
-
-/**
- * .auth-subtitle  [Design Token: --auth-subtitle-*]
- * One-liner description beneath the title. Slightly muted to create
- * visual hierarchy without excessive contrast reduction.
- */
-.auth-subtitle {
-  font-size: var(--auth-subtitle-size);
-  line-height: var(--auth-subtitle-lh);
-  color: var(--text-muted);
-  overflow-wrap: break-word;
-}
-
-/**
- * .auth-helper  [Design Token: --auth-helper-*]
- * Tertiary fine-print slot (security disclaimers, hints). Slightly
- * smaller than subtitle; maintains ≥4.5:1 contrast on the dark bg.
- */
-.auth-helper {
-  font-size: var(--auth-helper-size);
-  line-height: var(--auth-helper-lh);
-  color: var(--text-muted);
-  overflow-wrap: break-word;
-}
-
-/**
- * .auth-body
- * Slot that wraps the form / non-header children. Isolated so page-level
- * spacing (e.g. space-y-4 in form) never bleeds into header margins.
- */
-.auth-body {
-  /* intentionally unstyled – children control their own spacing */
-}
-
-/* ─── Discovery Empty & Error State Styles (Issue #107) ────────────────────
-   Components: DiscoveryEmptyState, DiscoveryErrorState
-   Tokens:     --ds-* (defined in :root above)
-   ─────────────────────────────────────────────────────────────────────────── */
-
-/**
- * .discovery-state-container
- * Shared centred column layout used by both empty and error states.
- * Rendered inside a <section aria-live> so changes are announced to
- * screen readers without a page reload.
- */
-.discovery-state-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: var(--ds-state-gap);
-  padding: var(--ds-state-pad-y) var(--ds-state-pad-x);
-  /* Inherit the glass-card look from the surrounding section */
-  background: var(--glass-bg);
-  border: 1px solid var(--glass-border);
-  backdrop-filter: var(--glass-blur);
-  border-radius: 1.5rem;
-  box-shadow: var(--shadow-xl);
-}
-
-/**
- * .discovery-state-icon-wrap
- * Circular icon container. Uses variant modifier for colour theming.
- */
-.discovery-state-icon-wrap {
-  width:  var(--ds-state-icon-size);
-  height: var(--ds-state-icon-size);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.discovery-state-icon-wrap--empty {
-  background: var(--ds-empty-icon-bg);
-  color:      var(--ds-empty-icon-fg);
-  border: 1px solid rgba(59, 130, 246, 0.18);
-}
-
-.discovery-state-icon-wrap--error {
-  background: var(--ds-error-icon-bg);
-  color:      var(--ds-error-icon-fg);
-  border: 1px solid rgba(239, 68, 68, 0.18);
-}
-
-/**
- * .discovery-state-title
- * <h2> inside the state cards — one level below the page <h1>.
- * 20px / semi-bold to maintain hierarchy without competing with the
- * "Discover Offerings" heading.
- */
-.discovery-state-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  line-height: 1.3;
-  color: var(--text-main);
-}
-
-/**
- * .discovery-state-body
- * Supporting copy. 14px, muted — passes ≥4.5:1 contrast on the dark bg.
- */
-.discovery-state-body {
-  font-size: 0.875rem;
-  line-height: 1.6;
-  color: var(--text-muted);
-  max-width: var(--ds-state-max-w);
-}
-
-/**
- * .discovery-state-query
- * Inline highlight for the echoed search term inside the body copy.
- * Uses accent colour + subtle bg to make the term scannable.
- */
-.discovery-state-query {
-  color: var(--text-accent);
-  font-weight: 500;
-  background: rgba(56, 189, 248, 0.08);
-  padding: 0 0.25em;
-  border-radius: 0.2em;
-}
-
-/**
- * .discovery-state-retry-hint
- * Small supplementary text shown when retries > 0 on the error state.
- * 13px to sit clearly below the body copy in the visual hierarchy.
- */
-.discovery-state-retry-hint {
-  font-size: 0.8125rem;
-  color: var(--text-muted);
-  font-style: italic;
-}
-
-/**
- * .discovery-state-action
- * Shared sizing override for CTA buttons inside state views.
- * Forces consistent minimum width and centers the icon+label pair.
- */
-.discovery-state-action {
-  width: auto;
-  min-width: 9rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding-inline: 1.5rem;
-}
-
-/**
- * .discovery-filter-btn--active
- * Visual indicator that filters are currently active.
- * Brightens the border to match --glass-border-bright.
- */
-.discovery-filter-btn--active {
-  border-color: var(--glass-border-bright);
-  color: var(--text-accent);
-  position: relative;
-}
-
-/**
- * .discovery-filter-badge
- * Small dot overlaid on the filter button when filters are active.
- * Matches the accent colour for visual consistency.
- */
-.discovery-filter-badge {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* Home/Landing Page Styles - Issue #100 */
-.home-container {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-xl);
-  text-align: center;
-}
-
-.home-card {
-  width: 100%;
-  max-width: 720px;
-  padding: clamp(var(--spacing-xl), 5vw, var(--spacing-4xl)) clamp(var(--spacing-lg), 5vw, var(--spacing-3xl));
-  border-radius: var(--radius-2xl);
-}
-
-.home-title {
-  font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-4xl));
-  font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-tight);
-  margin-bottom: var(--spacing-md);
-}
-
-.home-description {
-  color: var(--text-muted);
-  font-size: var(--font-size-lg);
-  line-height: var(--line-height-relaxed);
-  margin-bottom: var(--spacing-2xl);
-  max-width: 32rem;
-  margin-inline: auto;
-}
-
-.home-grid {
-  display: grid;
-  grid-template-cols: 1fr;
-  gap: var(--spacing-xl);
-  margin-bottom: var(--spacing-2xl);
-}
-
-@media (min-width: 768px) {
-  .home-grid {
-    grid-template-cols: repeat(2, 1fr);
-  }
-}
-
-.home-section {
-  padding: var(--spacing-xl);
-  text-align: start;
-  border-color: var(--glass-border);
-  border-radius: var(--radius-xl);
-}
-
-.home-section-title {
-  font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-semibold);
-  margin-bottom: var(--spacing-sm);
-}
-
-.home-list {
-  color: var(--text-muted);
-  font-size: var(--font-size-sm);
-  list-style: none;
-}
-
-.home-list li {
-  margin-bottom: var(--spacing-xs);
-}
-
-.home-list li:last-child {
-  margin-bottom: 0;
-}
-
-.home-actions {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  justify-content: center;
-}
-
-@media (min-width: 640px) {
-  .home-actions {
-    flex-direction: row;
-  }
-  .home-actions .btn {
-    width: auto;
-    padding-inline: var(--spacing-3xl);
-  }
-}
-
-.home-footer {
-  margin-top: var(--spacing-3xl);
-  font-size: var(--font-size-xs);
-  color: var(--text-muted);
-}
-
-/* Placeholder Page Styles - Issue #100 */
-.placeholder-container {
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-2xl);
-}
-
-.placeholder-card {
-  padding: clamp(var(--spacing-xl), 8vw, var(--spacing-4xl));
-  text-align: center;
-  border-radius: var(--radius-2xl);
-}
-
-.placeholder-title {
-  font-size: var(--font-size-3xl);
-  font-weight: var(--font-weight-bold);
-  margin-bottom: var(--spacing-md);
-}
-
-.placeholder-text {
-  color: var(--text-muted);
-  margin-bottom: var(--spacing-2xl);
-}
-
-/* ─── RTL Overrides ────────────────────────────────────────────── */
-[dir="rtl"] .home-section {
-  text-align: end;
-}
-
-[dir="rtl"] .text-start {
-  text-align: end;
-}
-
-[dir="rtl"] .text-end {
-  text-align: start;
-}
-
-/* Icons that flip horizontally in RTL (arrows, chevrons, back/forward) */
-[dir="rtl"] .icon-rtl {
-  transform: scaleX(-1);
-}
-
-/* RTL-aware absolute positioning utilities */
-[dir="rtl"] .right-0 { right: auto; left: 0; }
-[dir="rtl"] .right-3 { right: auto; left: 0.75rem; }
-[dir="rtl"] .right-4 { right: auto; left: 1rem; }
-[dir="rtl"] .left-3 { left: auto; right: 0.75rem; }
-[dir="rtl"] .-right-1 { right: auto; left: -0.25rem; }
-[dir="rtl"] .-left-1 { left: auto; right: -0.25rem; }
-
-/* RTL-aware margin/padding utilities */
-[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
-[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
-[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
-[dir="rtl"] .pl-10 { padding-left: 0; padding-right: 2.5rem; }
-[dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }
-[dir="rtl"] .pr-10 { padding-right: 0; padding-left: 2.5rem; }
-[dir="rtl"] .space-x-3 > * + * { margin-left: 0; margin-right: 0.75rem; }
-
-/* RTL-aware text alignment */
-[dir="rtl"] .text-left { text-align: right; }
-[dir="rtl"] .text-right { text-align: left; }
\ No newline at end of file
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
+
+:root {
+  --bg-color: #020617;
+  --bg-gradient: radial-gradient(
+    circle at top,
+    #0f172a 0,
+    #020617 40%,
+    #000000 100%
+  );
+
+  /* Standardized Design Tokens - Issue #68 */
+  --glass-bg: rgba(15, 23, 42, 0.85);
+  --glass-bg-accent: rgba(30, 41, 59, 0.5);
+  --glass-border: rgba(148, 163, 184, 0.15);
+  --glass-border-bright: rgba(148, 163, 184, 0.35);
+  --glass-blur: blur(12px);
+
+  /* Elevation Tokens */
+  --shadow-sm:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-md:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-lg:
+    0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.45); /* Standardized Card Elevation */
+
+  /* Spacing Scale Tokens - Issue #100 */
+  --spacing-3xs: 0.125rem;  /* 2px */
+  --spacing-2xs: 0.25rem;   /* 4px */
+  --spacing-xs: 0.5rem;     /* 8px */
+  --spacing-sm: 0.75rem;    /* 12px */
+  --spacing-md: 1rem;       /* 16px */
+  --spacing-lg: 1.25rem;    /* 20px */
+  --spacing-xl: 1.5rem;     /* 24px */
+  --spacing-2xl: 2rem;      /* 32px */
+  --spacing-3xl: 3rem;      /* 48px */
+  --spacing-4xl: 4rem;      /* 64px */
+
+  /* Radius Scale Tokens - Issue #100 */
+  --radius-xs: 0.25rem;     /* 4px */
+  --radius-sm: 0.375rem;    /* 6px */
+  --radius-md: 0.5rem;      /* 8px */
+  --radius-lg: 0.75rem;     /* 12px */
+  --radius-xl: 1rem;        /* 16px */
+  --radius-2xl: 1.5rem;     /* 24px */
+  --radius-full: 9999px;
+
+  /* Typography Scale Tokens - Issue #100 */
+  --font-size-xs: 0.75rem;      /* 12px */
+  --font-size-sm: 0.875rem;     /* 14px */
+  --font-size-base: 1rem;       /* 16px */
+  --font-size-lg: 1.125rem;     /* 18px */
+  --font-size-xl: 1.25rem;      /* 20px */
+  --font-size-2xl: 1.5rem;      /* 24px */
+  --font-size-3xl: 1.875rem;    /* 30px */
+  --font-size-4xl: 2.25rem;     /* 36px */
+  --font-size-5xl: 3rem;        /* 48px */
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --line-height-tight: 1.2;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+
+  /* Responsive/Component Tokens - Issue #100 */
+  --auth-title-size: clamp(1.5rem, 4vw, 1.875rem);
+  --auth-title-weight: var(--font-weight-bold);
+  --auth-title-tracking: -0.025em;
+  --auth-title-lh: var(--line-height-tight);
+  --auth-subtitle-size: 0.9375rem;
+  --auth-subtitle-lh: var(--line-height-normal);
+  --auth-helper-size: 0.8125rem;
+  --auth-helper-lh: var(--line-height-normal);
+
+  --auth-card-max-w: 480px;
+  --auth-card-padding-x: clamp(1.25rem, 5vw, 2.5rem);
+  --auth-card-padding-y: clamp(1.5rem, 4vw, 2.5rem);
+  --auth-header-gap: var(--spacing-xs);
+  --auth-header-mb: var(--spacing-2xl);
+
+  --primary: #3b82f6;
+  --primary-hover: #2563eb;
+  --text-main: #e5e7eb;
+  --text-muted: #cbd5e1; /* Improved contrast for WCAG AA on dark backgrounds */
+  --text-accent: #38bdf8;
+  --error: #ef4444;
+  --success: #10b981;
+
+  /* ─── Auth Layout Design Tokens (Issue #80) ──────────────────────────── */
+  /* Typography scale for AuthLayout title / subtitle / helperText slots */
+  --auth-title-size: clamp(1.5rem, 4vw, 1.875rem);   /* 24px → 30px fluid */
+  --auth-title-weight: 700;
+  --auth-title-tracking: -0.025em;
+  --auth-title-lh: 1.2;
+
+  --auth-subtitle-size: 0.9375rem;   /* 15px – one step below body */
+  --auth-subtitle-lh: 1.5;
+
+  --auth-helper-size: 0.8125rem;     /* 13px – fine print / security notes */
+  --auth-helper-lh: 1.5;
+
+  /* Card container sizing */
+  --auth-card-max-w: 480px;
+  --auth-card-padding-x: clamp(1.25rem, 5vw, 2.5rem);  /* 20px → 40px */
+  --auth-card-padding-y: clamp(1.5rem, 4vw, 2.5rem);   /* 24px → 40px */
+
+  /* Header section spacing */
+  --auth-header-gap: 0.5rem;    /* gap between title, subtitle, helperText */
+  --auth-header-mb: 2rem;       /* margin below header, above form */
+
+  /* ─── Discovery Empty/Error State Tokens (Issue #107) ──────────────────── */
+  --ds-empty-icon-bg:  rgba(59, 130, 246, 0.08);   /* primary-tinted icon well (empty) */
+  --ds-empty-icon-fg:  var(--primary);              /* icon stroke colour (empty)       */
+  --ds-error-icon-bg:  rgba(239, 68, 68, 0.08);    /* error-tinted icon well           */
+  --ds-error-icon-fg:  var(--error);               /* icon stroke colour (error)       */
+  --ds-state-gap:      1.25rem;                    /* vertical gap between state slots */
+  --ds-state-max-w:    28rem;                      /* constrains text column           */
+  --ds-state-pad-y:    3.5rem;                     /* top/bottom breathing room        */
+  --ds-state-pad-x:    2rem;                       /* side padding on narrow screens   */
+  --ds-state-icon-size: 4.5rem;                    /* icon well diameter               */
+  --ds-filter-badge-size: 0.5rem;                  /* active-filter dot size           */
+
+  /* ─── Status Timeline Tokens (Issue #153) ───────────────────────────── */
+  --st-gap: 1.5rem;                               /* gap between milestones           */
+  --st-marker-size: 2.5rem;                        /* milestone marker diameter         */
+  --st-connector-width: 2px;                       /* connector line thickness          */
+  --st-milestone-min-w: 8rem;                      /* min width per milestone (horiz)   */
+  --st-content-gap: 0.75rem;                       /* gap: marker → content (vertical)  */
+
+  /* Milestone state colours */
+  --st-completed-bg: rgba(16, 185, 129, 0.12);     /* ✓ completed background           */
+  --st-completed-border: #10b981;                   /* ✓ completed ring / connector      */
+  --st-completed-fg: #10b981;                       /* ✓ completed icon                  */
+
+  --st-progress-bg: rgba(59, 130, 246, 0.12);      /* ● in-progress background          */
+  --st-progress-border: #3b82f6;                    /* ● in-progress ring / connector    */
+  --st-progress-fg: #3b82f6;                        /* ● in-progress icon                */
+
+  --st-blocked-bg: rgba(239, 68, 68, 0.12);        /* ▲ blocked background              */
+  --st-blocked-border: rgba(239, 68, 68, 0.5);     /* ▲ blocked ring                    */
+  --st-blocked-fg: #ef4444;                         /* ▲ blocked icon                    */
+
+  --st-pending-bg: rgba(148, 163, 184, 0.08);      /* ○ pending background              */
+  --st-pending-border: rgba(148, 163, 184, 0.25);  /* ○ pending ring / connector        */
+  --st-pending-fg: #94a3b8;                         /* ○ pending icon                    */
+
+  /* ─── Density Mode Tokens (Issue #174) ───────────────────────────────
+   * Three modes: comfortable (spacious), cozy (normal), compact.
+   * Applied by setting data-density="comfortable|cozy|compact" on <html>.
+   * Use --density-* tokens in components that opt in to density scaling.
+   *
+   * Opt-in:  add class "density-aware" to your component root, then use
+   *          var(--density-row-height), var(--density-pad-y), etc.
+   * Opt-out: hardcode your own padding/height and ignore these tokens.
+   *
+   * Mobile touch targets: compact still guarantees 44px interactive height
+   * via min-height on interactive elements (see .density-touch-target below).
+   * ──────────────────────────────────────────────────────────────────── */
+
+  /* Comfortable – most breathing room (replaces old "spacious") */
+  --density-row-height: 3.5rem;       /* 56px */
+  --density-pad-y: 0.875rem;          /* 14px */
+  --density-pad-x: 1rem;              /* 16px */
+  --density-font-size: 0.9375rem;     /* 15px */
+  --density-line-height: 1.6;
+  --density-gap: 0.75rem;             /* 12px between items */
+
+  /* ─── Revenue Reporting Calendar Tokens (Issue #153) ─────────────── */
+  --rc-status-due: #f59e0b;                         /* ● due indicator                   */
+  --rc-status-submitted: #3b82f6;                   /* ● submitted indicator             */
+  --rc-status-accepted: #10b981;                    /* ● accepted indicator              */
+  --rc-status-overdue: #ef4444;                     /* ● overdue indicator               */
+  --rc-cell-size: 2.75rem;                          /* calendar day cell size            */
+  --rc-cell-gap: 0.25rem;                           /* gap between cells                 */
+  --rc-header-height: 2.5rem;                       /* day-name header height            */
+  --rc-nav-height: 3rem;                            /* month nav height                  */
+  --rc-pad-x: 1.25rem;                              /* horizontal padding                */
+  --rc-pad-y: 1.5rem;                               /* vertical padding                  */
+  --rc-gap: 1.5rem;                                 /* layout gap                        */
+  --rc-radius: 0.75rem;                             /* cell / panel radius               */
+  --rc-radius-sm: 0.5rem;                           /* small element radius              */
+  --rc-title-size: 1.25rem;                         /* month title size                  */
+  --rc-cell-size-text: 0.875rem;                    /* day number font size              */
+  --rc-legend-size: 0.75rem;                        /* legend font size                  */
+  --shimmer-gradient: linear-gradient(
+    90deg,
+    rgba(148, 163, 184, 0.06) 25%,
+    rgba(148, 163, 184, 0.18) 50%,
+    rgba(148, 163, 184, 0.06) 75%
+  );
+}
+
+/* ─── Density mode overrides ─────────────────────────────────────
+ * Applied to <html data-density="..."> so every component can
+ * inherit the tokens via CSS cascade without extra wrapper elements.
+ * ─────────────────────────────────────────────────────────────── */
+
+[data-density="cozy"] {
+  --density-row-height: 3rem;         /* 48px */
+  --density-pad-y: 0.625rem;          /* 10px */
+  --density-pad-x: 0.875rem;          /* 14px */
+  --density-font-size: 0.875rem;      /* 14px */
+  --density-line-height: 1.5;
+  --density-gap: 0.5rem;              /* 8px */
+}
+
+[data-density="compact"] {
+  --density-row-height: 2.25rem;      /* 36px */
+  --density-pad-y: 0.375rem;          /* 6px */
+  --density-pad-x: 0.75rem;           /* 12px */
+  --density-font-size: 0.8125rem;     /* 13px */
+  --density-line-height: 1.4;
+  --density-gap: 0.375rem;            /* 6px */
+}
+
+/* Compact mobile: ensure 44×44 touch target on interactive controls */
+@media (max-width: 768px) {
+  [data-density="compact"] .density-touch-target {
+    min-height: 2.75rem;              /* 44px */
+    min-width: 2.75rem;
+  }
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family:
+    "Inter",
+    system-ui,
+    -apple-system,
+    sans-serif;
+  background: var(--bg-gradient);
+  color: var(--text-main);
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+.glass-card {
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  backdrop-filter: var(--glass-blur);
+  border-radius: 1.5rem;
+  box-shadow: var(--shadow-xl);
+  transition:
+    border-color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.glass-card-interactive:hover {
+  border-color: var(--glass-border-bright);
+  transform: translateY(-2px);
+}
+
+.auth-layout-outer {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xl) clamp(1rem, 5vw, 1.5rem);
+}
+
+.auth-card {
+  width: 100%;
+  max-width: var(--auth-card-max-w);
+  padding: var(--auth-card-padding-y) var(--auth-card-padding-x);
+  border-radius: var(--radius-2xl);
+  overflow-wrap: break-word;
+}
+
+.auth-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--auth-header-gap);
+  margin-bottom: var(--auth-header-mb);
+}
+
+.auth-title {
+  font-size: var(--auth-title-size);
+  font-weight: var(--auth-title-weight);
+  letter-spacing: var(--auth-title-tracking);
+  line-height: var(--auth-title-lh);
+  color: var(--text-main);
+  overflow-wrap: break-word;
+}
+
+.auth-subtitle {
+  font-size: var(--auth-subtitle-size);
+  line-height: var(--auth-subtitle-lh);
+  color: var(--text-muted);
+  overflow-wrap: break-word;
+}
+
+.auth-helper {
+  font-size: var(--auth-helper-size);
+  line-height: var(--auth-helper-lh);
+  color: var(--text-muted);
+  margin-top: var(--spacing-xs);
+  overflow-wrap: break-word;
+}
+
+.auth-body {
+  width: 100%;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  width: 100%;
+}
+
+.btn-primary:hover {
+  background: var(--primary-hover);
+  transform: translateY(-1px);
+}
+
+.btn-primary:focus-visible,
+.btn-secondary:focus-visible {
+  outline: 2px solid white;
+  outline-offset: 2px;
+  border-radius: 0.75rem;
+}
+
+.btn-secondary {
+  background: rgba(148, 163, 184, 0.1);
+  color: var(--text-main);
+  border: 1px solid var(--glass-border);
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.btn-secondary:hover {
+  background: rgba(148, 163, 184, 0.2);
+}
+
+.btn-secondary:focus {
+  outline: 2px solid var(--text-main);
+  outline-offset: 2px;
+}
+
+.input-group {
+  margin-bottom: 1.25rem;
+}
+
+.input-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
+}
+
+.input-field {
+  width: 100%;
+  background: rgba(15, 23, 42, 0.5);
+  border: 1px solid var(--glass-border);
+  border-radius: 0.75rem;
+  padding: 0.75rem 1rem;
+  color: var(--text-main);
+  font-size: 1rem;
+  transition: border-color 0.2s ease;
+}
+
+.input-field:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+}
+
+/* WCAG 2.1 AA: Focus visible for keyboard navigation */
+.input-field:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4);
+}
+
+button:focus-visible {
+  outline: 2px solid white;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.6);
+}
+
+a:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.input-field.input-error {
+  border-color: var(--error);
+}
+
+.input-field.input-error:focus {
+  outline: 2px solid var(--error);
+  outline-offset: 2px;
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.4s ease-out forwards;
+}
+
+.animate-shake {
+  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
+}
+
+@keyframes shake {
+  10%, 90% { transform: translate3d(-1px, 0, 0); }
+  20%, 80% { transform: translate3d(2px, 0, 0); }
+  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
+  40%, 60% { transform: translate3d(3px, 0, 0); }
+}
+
+@keyframes shake-rtl {
+  10%, 90% { transform: translate3d(1px, 0, 0); }
+  20%, 80% { transform: translate3d(-2px, 0, 0); }
+  30%, 50%, 70% { transform: translate3d(3px, 0, 0); }
+  40%, 60% { transform: translate3d(-3px, 0, 0); }
+}
+
+[dir="rtl"] .animate-shake {
+  animation-name: shake-rtl;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Accessibility: Focus rings for interactive elements */
+a:focus-visible, 
+button:focus-visible, 
+input:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+
+/* Localized text handling */
+.localized-text {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  hyphens: auto;
+}
+
+.localized-text[dir="rtl"] {
+  unicode-bidi: embed;
+}
+
+/* Utilities for accessibility and consistency */
+.text-primary {
+  color: var(--primary);
+}
+
+.text-primary:hover {
+  color: var(--primary-hover);
+}
+
+.hover-underline:hover {
+  text-decoration: underline;
+}
+
+.focus-ring:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+
+.link-styled {
+  color: var(--primary);
+  font-weight: 500;
+  text-decoration: none;
+  transition: color 0.2s ease;
+  text-underline-offset: 2px;
+}
+
+.link-styled:hover {
+  color: var(--primary-hover);
+  text-decoration: underline;
+}
+
+.link-styled:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+
+/* Utility Classes */
+.text-muted { color: var(--text-muted); }
+.text-main { color: var(--text-main); }
+.text-success { color: var(--success); }
+.text-error { color: var(--error); }
+
+/* ─── AuthLayout Component Styles (Issue #80) ─────────────────────────────
+   Implements the formalized design-system type scale and responsive card.
+   Tokens are defined in :root above under "Auth Layout Design Tokens".
+   ───────────────────────────────────────────────────────────────────────── */
+
+/**
+ * .auth-layout-outer
+ * Full-viewport centring wrapper. Adds safe-area-aware horizontal padding
+ * so content is never clipped at 320px or on notched devices.
+ */
+.auth-layout-outer {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  /* horizontal safe-area inset ensures usability on notched devices */
+  padding:
+    1.5rem
+    max(env(safe-area-inset-right, 0px), 1rem)
+    1.5rem
+    max(env(safe-area-inset-left, 0px), 1rem);
+}
+
+[dir="rtl"] .auth-layout-outer {
+  padding:
+    1.5rem
+    max(env(safe-area-inset-left, 0px), 1rem)
+    1.5rem
+    max(env(safe-area-inset-right, 0px), 1rem);
+}
+
+/**
+ * .auth-card
+ * The glassmorphic card container. Uses fluid padding tokens so the card
+ * breathes at desktop widths yet stays comfortable at 320px.
+ */
+.auth-card {
+  width: 100%;
+  max-width: var(--auth-card-max-w);
+  padding: var(--auth-card-padding-y) var(--auth-card-padding-x);
+}
+
+/**
+ * .auth-header
+ * Groups the title / subtitle / helperText with a consistent column gap
+ * and a bottom margin separating it from the form body.
+ */
+.auth-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--auth-header-gap);
+  margin-bottom: var(--auth-header-mb);
+}
+
+/**
+ * .auth-title  [Design Token: --auth-title-*]
+ * Page-level heading. Fluid font-size scales from 24px (320px viewport)
+ * to 30px (≥600px) via clamp(). Tight tracking improves legibility at
+ * large sizes. Single <h1> per page — enforced by AuthLayout API.
+ */
+.auth-title {
+  font-size: var(--auth-title-size);
+  font-weight: var(--auth-title-weight);
+  letter-spacing: var(--auth-title-tracking);
+  line-height: var(--auth-title-lh);
+  color: var(--text-main);
+  /* Long unbreakable strings (e.g. very long company names) wrap cleanly */
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+/**
+ * .auth-subtitle  [Design Token: --auth-subtitle-*]
+ * One-liner description beneath the title. Slightly muted to create
+ * visual hierarchy without excessive contrast reduction.
+ */
+.auth-subtitle {
+  font-size: var(--auth-subtitle-size);
+  line-height: var(--auth-subtitle-lh);
+  color: var(--text-muted);
+  overflow-wrap: break-word;
+}
+
+/**
+ * .auth-helper  [Design Token: --auth-helper-*]
+ * Tertiary fine-print slot (security disclaimers, hints). Slightly
+ * smaller than subtitle; maintains ≥4.5:1 contrast on the dark bg.
+ */
+.auth-helper {
+  font-size: var(--auth-helper-size);
+  line-height: var(--auth-helper-lh);
+  color: var(--text-muted);
+  overflow-wrap: break-word;
+}
+
+/**
+ * .auth-body
+ * Slot that wraps the form / non-header children. Isolated so page-level
+ * spacing (e.g. space-y-4 in form) never bleeds into header margins.
+ */
+.auth-body {
+  /* intentionally unstyled – children control their own spacing */
+}
+
+/* ─── Discovery Empty & Error State Styles (Issue #107) ────────────────────
+   Components: DiscoveryEmptyState, DiscoveryErrorState
+   Tokens:     --ds-* (defined in :root above)
+   ─────────────────────────────────────────────────────────────────────────── */
+
+/**
+ * .discovery-state-container
+ * Shared centred column layout used by both empty and error states.
+ * Rendered inside a <section aria-live> so changes are announced to
+ * screen readers without a page reload.
+ */
+.discovery-state-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: var(--ds-state-gap);
+  padding: var(--ds-state-pad-y) var(--ds-state-pad-x);
+  /* Inherit the glass-card look from the surrounding section */
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  backdrop-filter: var(--glass-blur);
+  border-radius: 1.5rem;
+  box-shadow: var(--shadow-xl);
+}
+
+/**
+ * .discovery-state-icon-wrap
+ * Circular icon container. Uses variant modifier for colour theming.
+ */
+.discovery-state-icon-wrap {
+  width:  var(--ds-state-icon-size);
+  height: var(--ds-state-icon-size);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.discovery-state-icon-wrap--empty {
+  background: var(--ds-empty-icon-bg);
+  color:      var(--ds-empty-icon-fg);
+  border: 1px solid rgba(59, 130, 246, 0.18);
+}
+
+.discovery-state-icon-wrap--error {
+  background: var(--ds-error-icon-bg);
+  color:      var(--ds-error-icon-fg);
+  border: 1px solid rgba(239, 68, 68, 0.18);
+}
+
+/**
+ * .discovery-state-title
+ * <h2> inside the state cards — one level below the page <h1>.
+ * 20px / semi-bold to maintain hierarchy without competing with the
+ * "Discover Offerings" heading.
+ */
+.discovery-state-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--text-main);
+}
+
+/**
+ * .discovery-state-body
+ * Supporting copy. 14px, muted — passes ≥4.5:1 contrast on the dark bg.
+ */
+.discovery-state-body {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--text-muted);
+  max-width: var(--ds-state-max-w);
+}
+
+/**
+ * .discovery-state-query
+ * Inline highlight for the echoed search term inside the body copy.
+ * Uses accent colour + subtle bg to make the term scannable.
+ */
+.discovery-state-query {
+  color: var(--text-accent);
+  font-weight: 500;
+  background: rgba(56, 189, 248, 0.08);
+  padding: 0 0.25em;
+  border-radius: 0.2em;
+}
+
+/**
+ * .discovery-state-retry-hint
+ * Small supplementary text shown when retries > 0 on the error state.
+ * 13px to sit clearly below the body copy in the visual hierarchy.
+ */
+.discovery-state-retry-hint {
+  font-size: 0.8125rem;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+/**
+ * .discovery-state-action
+ * Shared sizing override for CTA buttons inside state views.
+ * Forces consistent minimum width and centers the icon+label pair.
+ */
+.discovery-state-action {
+  width: auto;
+  min-width: 9rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding-inline: 1.5rem;
+}
+
+/**
+ * .discovery-filter-btn--active
+ * Visual indicator that filters are currently active.
+ * Brightens the border to match --glass-border-bright.
+ */
+.discovery-filter-btn--active {
+  border-color: var(--glass-border-bright);
+  color: var(--text-accent);
+  position: relative;
+}
+
+/**
+ * .discovery-filter-badge
+ * Small dot overlaid on the filter button when filters are active.
+ * Matches the accent colour for visual consistency.
+ */
+.discovery-filter-badge {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Home/Landing Page Styles - Issue #100 */
+.home-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xl);
+  text-align: center;
+}
+
+.home-card {
+  width: 100%;
+  max-width: 720px;
+  padding: clamp(var(--spacing-xl), 5vw, var(--spacing-4xl)) clamp(var(--spacing-lg), 5vw, var(--spacing-3xl));
+  border-radius: var(--radius-2xl);
+}
+
+.home-title {
+  font-size: clamp(var(--font-size-2xl), 5vw, var(--font-size-4xl));
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+  margin-bottom: var(--spacing-md);
+}
+
+.home-description {
+  color: var(--text-muted);
+  font-size: var(--font-size-lg);
+  line-height: var(--line-height-relaxed);
+  margin-bottom: var(--spacing-2xl);
+  max-width: 32rem;
+  margin-inline: auto;
+}
+
+.home-grid {
+  display: grid;
+  grid-template-cols: 1fr;
+  gap: var(--spacing-xl);
+  margin-bottom: var(--spacing-2xl);
+}
+
+@media (min-width: 768px) {
+  .home-grid {
+    grid-template-cols: repeat(2, 1fr);
+  }
+}
+
+.home-section {
+  padding: var(--spacing-xl);
+  text-align: start;
+  border-color: var(--glass-border);
+  border-radius: var(--radius-xl);
+}
+
+.home-section-title {
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: var(--spacing-sm);
+}
+
+.home-list {
+  color: var(--text-muted);
+  font-size: var(--font-size-sm);
+  list-style: none;
+}
+
+.home-list li {
+  margin-bottom: var(--spacing-xs);
+}
+
+.home-list li:last-child {
+  margin-bottom: 0;
+}
+
+.home-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  justify-content: center;
+}
+
+@media (min-width: 640px) {
+  .home-actions {
+    flex-direction: row;
+  }
+  .home-actions .btn {
+    width: auto;
+    padding-inline: var(--spacing-3xl);
+  }
+}
+
+.home-footer {
+  margin-top: var(--spacing-3xl);
+  font-size: var(--font-size-xs);
+  color: var(--text-muted);
+}
+
+/* Placeholder Page Styles - Issue #100 */
+.placeholder-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-2xl);
+}
+
+.placeholder-card {
+  padding: clamp(var(--spacing-xl), 8vw, var(--spacing-4xl));
+  text-align: center;
+  border-radius: var(--radius-2xl);
+}
+
+.placeholder-title {
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  margin-bottom: var(--spacing-md);
+}
+
+.placeholder-text {
+  color: var(--text-muted);
+  margin-bottom: var(--spacing-2xl);
+}
+
+/* ─── RTL Overrides ────────────────────────────────────────────── */
+[dir="rtl"] .home-section {
+  text-align: end;
+}
+
+[dir="rtl"] .text-start {
+  text-align: end;
+}
+
+[dir="rtl"] .text-end {
+  text-align: start;
+}
+
+/* Icons that flip horizontally in RTL (arrows, chevrons, back/forward) */
+[dir="rtl"] .icon-rtl {
+  transform: scaleX(-1);
+}
+
+/* RTL-aware absolute positioning utilities */
+[dir="rtl"] .right-0 { right: auto; left: 0; }
+[dir="rtl"] .right-3 { right: auto; left: 0.75rem; }
+[dir="rtl"] .right-4 { right: auto; left: 1rem; }
+[dir="rtl"] .left-3 { left: auto; right: 0.75rem; }
+[dir="rtl"] .-right-1 { right: auto; left: -0.25rem; }
+[dir="rtl"] .-left-1 { left: auto; right: -0.25rem; }
+
+/* RTL-aware margin/padding utilities */
+[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
+[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
+[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
+[dir="rtl"] .pl-10 { padding-left: 0; padding-right: 2.5rem; }
+[dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }
+[dir="rtl"] .pr-10 { padding-right: 0; padding-left: 2.5rem; }
+[dir="rtl"] .space-x-3 > * + * { margin-left: 0; margin-right: 0.75rem; }
+
+/* RTL-aware text alignment */
+[dir="rtl"] .text-left { text-align: right; }
+[dir="rtl"] .text-right { text-align: left; }
+
+/* ─── Branded Loading States & Shimmer ────────────────────────────── */
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+.animate-shimmer {
+  background: var(--shimmer-gradient);
+  background-size: 200% 100%;
+  animation: shimmer 1.6s infinite linear;
+}
+
+@keyframes spin-loader {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animate-spin-loader {
+  animation: spin-loader 0.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-shimmer {
+    animation-play-state: paused;
+    background: rgba(148, 163, 184, 0.1);
+  }
+  .animate-spin-loader {
+    animation-duration: 3s;
+  }
+}
+
+/* Inline Progress Bar */
+.progress-bar-container {
+  width: 100%;
+  height: 6px;
+  background: rgba(148, 163, 184, 0.1);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-bar-fill {
+  height: 100%;
+  border-radius: var(--radius-full);
+  background: var(--primary);
+  transition: width 0.2s ease-out;
+}
+
+.progress-bar-indeterminate {
+  width: 100%;
+  height: 100%;
+  background: var(--shimmer-gradient);
+  background-size: 200% 100%;
+  animation: shimmer 1.6s infinite linear;
+}
+
+/* Page Loader */
+.page-loader-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(2, 6, 23, 0.8);
+  backdrop-filter: blur(8px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  gap: var(--spacing-md);
+  color: var(--text-main);
+}
+
+.page-loader-text {
+  font-size: var(--font-size-sm);
+  color: var(--text-muted);
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+/* Skeletons */
+.skeleton {
+  border-radius: var(--radius-md);
+  background: var(--shimmer-gradient);
+  background-size: 200% 100%;
+  animation: shimmer 1.6s infinite linear;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.skeleton-text {
+  height: 1rem;
+  width: 100%;
+}
+
+.skeleton-text-short {
+  height: 1rem;
+  width: 60%;
+}
+
+.skeleton-title {
+  height: 1.75rem;
+  width: 40%;
+}
+
+.skeleton-avatar {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--radius-full);
+}
+
+.skeleton-rect {
+  width: 100%;
+  height: 10rem;
+}
\ No newline at end of file