/**
 * Priori Design System Tokens
 * Base: Generated Thu, 20 Nov 2025 16:37:46 GMT
 * Extended: Breakpoints added for responsive desktop optimization
 */

:root {
  /* ==========================================================================
     BREAKPOINTS - Desktop-first responsive system (Nov 2025 best practices)
     Usage: Reference values only - use in media queries
     ========================================================================== */
  --breakpoint-sm: 640px;   /* Mobile landscape */
  --breakpoint-md: 768px;   /* Tablet portrait */
  --breakpoint-lg: 1024px;  /* Tablet landscape / Small desktop */
  --breakpoint-xl: 1280px;  /* Desktop */
  --breakpoint-2xl: 1536px; /* Large desktop */

  /* Container max-widths per breakpoint */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;  /* Max content width for readability */
  --font-letter-spacing-wider: 0.05em;
  --font-letter-spacing-wide: 0.025em;
  --font-letter-spacing-normal: 0em;
  --font-letter-spacing-tight: -0.025em;
  --font-letter-spacing-tighter: -0.05em;
  --font-line-height-loose: 2;
  --font-line-height-relaxed: 1.625;
  --font-line-height-normal: 1.5;
  --font-line-height-snug: 1.375;
  --font-line-height-tight: 1.25;
  --font-line-height-none: 1;
  --font-weight-extrabold: 800;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-size-6xl: 3.75rem;
  --font-size-5xl: 3rem;
  --font-size-4xl: 2.25rem;
  --font-size-3xl: 1.875rem;
  --font-size-2xl: 1.5rem;
  --font-size-xl: 1.25rem;
  --font-size-lg: 1.125rem;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-xs: 0.75rem;
  --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --transition-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --transition-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --transition-easing-linear: linear;
  --transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-duration-slower: 500ms;
  --transition-duration-slow: 300ms;
  --transition-duration-base: 200ms;
  --transition-duration-fast: 150ms;
  --spacing-24: 6rem;
  --spacing-20: 5rem;
  --spacing-16: 4rem;
  --spacing-12: 3rem;
  --spacing-10: 2.5rem;
  --spacing-8: 2rem;
  --spacing-6: 1.5rem;
  --spacing-5: 1.25rem;
  --spacing-4: 1rem;
  --spacing-3: 0.75rem;
  --spacing-2: 0.5rem;
  --spacing-1: 0.25rem;
  --spacing-0: 0;
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --border-width-default: 1px;
  --border-width-4: 4px;
  --border-width-2: 2px;
  --border-radius-full: 9999px;
  --border-radius-2xl: 1.5rem;
  --border-radius-xl: 1rem;
  --border-radius-lg: 0.75rem;
  --border-radius-md: 0.5rem;
  --border-radius-sm: 0.25rem;
  --color-radix-amber-12: 20 80% 17%;
  --color-radix-amber-11: 30 100% 34%;
  --color-radix-amber-10: 35 100% 55.5%;
  --color-radix-amber-9: 39 100% 57%;
  --color-radix-amber-8: 35 85.2% 55.1%;
  --color-radix-amber-7: 36 86.1% 67.1%;
  --color-radix-amber-6: 38 99.7% 76.3%;
  --color-radix-amber-5: 42 100% 81.8%;
  --color-radix-amber-4: 43 100% 86.8%;
  --color-radix-amber-3: 44 100% 91.7%;
  --color-radix-amber-2: 40 100% 96.5%;
  --color-radix-amber-1: 39 70% 99%;
  --color-radix-green-12: 155 40% 14%;
  --color-radix-green-11: 153 67% 28.5%;
  --color-radix-green-10: 152 57.5% 37.6%;
  --color-radix-green-9: 151 55% 41.5%;
  --color-radix-green-8: 151 40.2% 54.1%;
  --color-radix-green-7: 146 38.5% 69%;
  --color-radix-green-6: 143 40.3% 79%;
  --color-radix-green-5: 141 43.7% 86%;
  --color-radix-green-4: 140 48.7% 91%;
  --color-radix-green-3: 139 55.2% 94.5%;
  --color-radix-green-2: 138 62.5% 96.9%;
  --color-radix-green-1: 136 50% 98.9%;
  --color-radix-red-12: 354 50% 14.6%;
  --color-radix-red-11: 358 65% 48.7%;
  --color-radix-red-10: 358 69.4% 55.2%;
  --color-radix-red-9: 358 75% 59%;
  --color-radix-red-8: 359 69.5% 74.3%;
  --color-radix-red-7: 359 74.2% 81.7%;
  --color-radix-red-6: 360 81.7% 87.8%;
  --color-radix-red-5: 360 90.2% 91.9%;
  --color-radix-red-4: 360 97.9% 94.8%;
  --color-radix-red-3: 360 100% 96.8%;
  --color-radix-red-2: 359 100% 98.6%;
  --color-radix-red-1: 359 100% 99.4%;
  --color-radix-blue-12: 211 100% 15%;
  --color-radix-blue-11: 211 100% 43.2%;
  --color-radix-blue-10: 208 100% 47.3%;
  --color-radix-blue-9: 206 100% 50%;
  --color-radix-blue-8: 206 81.9% 65.3%;
  --color-radix-blue-7: 208 77.5% 76.9%;
  --color-radix-blue-6: 209 81.2% 84.5%;
  --color-radix-blue-5: 209 95% 90.1%;
  --color-radix-blue-4: 210 98.8% 94%;
  --color-radix-blue-3: 209 100% 96.5%;
  --color-radix-blue-2: 210 100% 98%;
  --color-radix-blue-1: 206 100% 99.2%;
  --color-radix-slate-12: 206 24% 9%;
  --color-radix-slate-11: 206 6% 43.5%;
  --color-radix-slate-10: 206 5.8% 52.3%;
  --color-radix-slate-9: 206 6% 56.1%;
  --color-radix-slate-8: 205 10.7% 78%;
  --color-radix-slate-7: 207 11.1% 85.4%;
  --color-radix-slate-6: 208 11.3% 88.4%;
  --color-radix-slate-5: 208 11.7% 90.9%;
  --color-radix-slate-4: 209 12.2% 93.1%;
  --color-radix-slate-3: 209 13.3% 95.3%;
  --color-radix-slate-2: 210 16.7% 97.6%;
  --color-radix-slate-1: 210 20% 98%;
  --color-brand-lafc-black: 0 0% 0%;
  --color-brand-lafc-gold: 45 65% 55%;
  --color-brand-skc-secondary: 220 70% 80%;
  --color-brand-skc-primary: 221 83% 35%;

  /* Priori Brand Colors (from Figma Nov 2025) */
  --color-priori-primary: 0 0% 7%;           /* #111111 */
  --color-priori-secondary: 233 79% 15%;     /* #090D44 */
  --color-priori-tertiary: 219 67% 23%;      /* #142D60 */
  --color-priori-sky-blue: 200 83% 81%;      /* #A6D9F7 */
  --color-priori-light-blue: 205 60% 55%;    /* #449DD1 */
  --color-priori-good: 133 40% 56%;          /* #65BA74 */
  --color-priori-okay: 45 100% 67%;          /* #FFD656 */
  --color-priori-bad: 0 74% 50%;             /* #DC2626 */
  --button-height-icon: 2.5rem;
  --button-height-lg: 2.75rem;
  --button-height-default: 2.5rem;
  --button-height-sm: 2.25rem;
  --color-semantic-ring: var(--color-radix-blue-9);
  --color-semantic-input: var(--color-radix-slate-6);
  --color-semantic-border: var(--color-radix-slate-6);
  --color-semantic-warning-foreground: var(--color-radix-slate-12);
  --color-semantic-warning: var(--color-radix-amber-9);
  --color-semantic-success-foreground: var(--color-radix-slate-1);
  --color-semantic-success: var(--color-radix-green-9);
  --color-semantic-destructive-foreground: var(--color-radix-slate-1);
  --color-semantic-destructive: var(--color-radix-red-9);
  --color-semantic-accent-foreground: var(--color-radix-slate-12);
  --color-semantic-accent: var(--color-radix-slate-3);
  --color-semantic-muted-foreground: var(--color-radix-slate-11);
  --color-semantic-muted: var(--color-radix-slate-3);
  --color-semantic-secondary-foreground: var(--color-radix-slate-12);
  --color-semantic-secondary: var(--color-radix-slate-3);
  --color-semantic-primary-foreground: var(--color-radix-slate-1);
  --color-semantic-primary: var(--color-radix-blue-9);
  --color-semantic-popover-foreground: var(--color-radix-slate-12);
  --color-semantic-popover: var(--color-radix-slate-1);
  --color-semantic-card-foreground: var(--color-radix-slate-12);
  --color-semantic-card: var(--color-radix-slate-1);
  --color-semantic-foreground: var(--color-radix-slate-12);
  --color-semantic-background: 240 4% 97%; /* #F7F7F8 - Page background */
  --card-shadow-elevated: var(--shadow-lg);
  --card-shadow-default: var(--shadow-sm);
  --card-border-width: var(--border-width-default);
  --card-radius: var(--border-radius-lg);
  --card-padding-compact: var(--spacing-4);
  --card-padding-default: var(--spacing-6);
  --button-font-weight: var(--font-weight-medium);
  --button-font-size-lg: var(--font-size-base);
  --button-font-size-default: var(--font-size-sm);
  --button-font-size-sm: var(--font-size-xs);
  --button-radius: var(--border-radius-md);
  --button-padding-lg: var(--spacing-8);
  --button-padding-default: var(--spacing-4);
  --button-padding-sm: var(--spacing-3);
  --card-border-color: var(--color-semantic-border);

  /* ==========================================================================
     TEXT COLORS - Priori text hierarchy scale
     Based on Radix Slate for consistent typography
     ========================================================================== */
  --text-display: #121417;     /* Slate 12 – hero text */
  --text-title: #121417;       /* Slate 12 – page titles */
  --text-heading: #121417;     /* Slate 12 – section headers */
  --text-primary: #121417;     /* Slate 12 – body text */
  --text-secondary: #64696E;   /* Slate 11 – labels, subheaders */
  --text-tertiary: #7C8287;    /* Slate 9 – metadata, helper text */
  --text-muted: #91979C;       /* Slate 8 – placeholders, disabled */

  /* ==========================================================================
     PANE SURFACE (L2) - Translucent glass surface for auth cards, modals
     Cursor/Linear style: soft, frosted appearance without elevation shadows
     ========================================================================== */
  --surface-pane-bg: hsla(0, 0%, 100%, 0.85);
  --surface-pane-border: hsla(0, 0%, 0%, 0.08);
  --surface-pane-radius: var(--border-radius-xl);
  --surface-pane-padding: var(--spacing-8);
  --surface-pane-backdrop-blur: 20px;
}