/* ========================================
   TurnFile 360 - Material 3 Design Tokens
   Professional & Authentic Design System
   ======================================== */

/* ========================================
   FONT LOADING - Roboto Flex Variable Font
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');

:root {
    /* ========================================
       TYPOGRAPHY - Roboto Flex
       ======================================== */
    --m3-font-family: 'Roboto Flex', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --m3-font-display: 'Roboto Flex', var(--m3-font-family);

    /* Type Scale - M3 Specs */
    --m3-display-large: 3.5625rem;
    /* 57px */
    --m3-display-medium: 2.8125rem;
    /* 45px */
    --m3-display-small: 2.25rem;
    /* 36px */
    --m3-headline-large: 2rem;
    /* 32px */
    --m3-headline-medium: 1.75rem;
    /* 28px */
    --m3-headline-small: 1.5rem;
    /* 24px */
    --m3-title-large: 1.375rem;
    /* 22px */
    --m3-title-medium: 1rem;
    /* 16px */
    --m3-title-small: 0.875rem;
    /* 14px */
    --m3-body-large: 1rem;
    /* 16px */
    --m3-body-medium: 0.875rem;
    /* 14px */
    --m3-body-small: 0.75rem;
    /* 12px */
    --m3-label-large: 0.875rem;
    /* 14px */
    --m3-label-medium: 0.75rem;
    /* 12px */
    --m3-label-small: 0.6875rem;
    /* 11px */

    /* Font Weights */
    --m3-weight-light: 300;
    --m3-weight-regular: 400;
    --m3-weight-medium: 500;
    --m3-weight-semibold: 600;
    --m3-weight-bold: 700;

    /* Letter Spacing */
    --m3-tracking-tight: -0.02em;
    --m3-tracking-normal: 0;
    --m3-tracking-wide: 0.02em;
    --m3-tracking-wider: 0.04em;

    /* Line Heights */
    --m3-leading-none: 1;
    --m3-leading-tight: 1.2;
    --m3-leading-snug: 1.375;
    --m3-leading-normal: 1.5;
    --m3-leading-relaxed: 1.625;

    /* ========================================
       COLOR SYSTEM - Sophisticated Neutral + Primary
       Inspired by professional tools (Figma, Linear, Notion)
       ======================================== */

    /* Primary - Deep Indigo (Professional, Trustworthy) */
    --m3-primary-5: #0d0f26;
    --m3-primary-10: #151934;
    --m3-primary-20: #232a4d;
    --m3-primary-30: #333d6b;
    --m3-primary-40: #4553a0;
    --m3-primary-50: #5865c5;
    --m3-primary-60: #7480d4;
    --m3-primary-70: #929ce1;
    --m3-primary-80: #b3baec;
    --m3-primary-90: #d4d8f5;
    --m3-primary-95: #eaecfa;
    --m3-primary-99: #fafaff;

    /* Secondary - Slate (Clean, Professional) */
    --m3-secondary-5: #0f1114;
    --m3-secondary-10: #1a1d23;
    --m3-secondary-20: #2d323b;
    --m3-secondary-30: #424954;
    --m3-secondary-40: #5a616e;
    --m3-secondary-50: #737b89;
    --m3-secondary-60: #8e95a2;
    --m3-secondary-70: #a9b0bb;
    --m3-secondary-80: #c5cad3;
    --m3-secondary-90: #e2e5eb;
    --m3-secondary-95: #f1f3f5;
    --m3-secondary-99: #fafbfc;

    /* Tertiary - Teal (Fresh, Modern accent) */
    --m3-tertiary-10: #0d2b2b;
    --m3-tertiary-20: #194343;
    --m3-tertiary-30: #265c5c;
    --m3-tertiary-40: #347878;
    --m3-tertiary-50: #449595;
    --m3-tertiary-60: #5eafaf;
    --m3-tertiary-70: #7cc5c5;
    --m3-tertiary-80: #a0d9d9;
    --m3-tertiary-90: #c9ebeb;
    --m3-tertiary-95: #e6f6f6;

    /* Neutral - Cool Gray */
    --m3-neutral-0: #000000;
    --m3-neutral-5: #0d0e10;
    --m3-neutral-10: #1a1c1f;
    --m3-neutral-20: #2e3136;
    --m3-neutral-25: #393c42;
    --m3-neutral-30: #44484f;
    --m3-neutral-35: #50545c;
    --m3-neutral-40: #5c6069;
    --m3-neutral-50: #757a84;
    --m3-neutral-60: #8f949e;
    --m3-neutral-70: #aaaeb7;
    --m3-neutral-80: #c6c9d0;
    --m3-neutral-90: #e2e4e9;
    --m3-neutral-95: #f1f2f5;
    --m3-neutral-99: #fafbfc;
    --m3-neutral-100: #ffffff;

    /* Semantic Colors */
    --m3-success-10: #0a2912;
    --m3-success-40: #1a8244;
    --m3-success-50: #22a557;
    --m3-success-80: #7cd4a0;
    --m3-success-90: #c2ecd3;
    --m3-success-95: #e5f7ec;

    --m3-error-10: #2d0a0a;
    --m3-error-40: #c23a3a;
    --m3-error-50: #dc4444;
    --m3-error-80: #f5a2a2;
    --m3-error-90: #fcd6d6;
    --m3-error-95: #feecec;

    --m3-warning-10: #2d1f0a;
    --m3-warning-40: #c28a2e;
    --m3-warning-50: #e5a33a;
    --m3-warning-80: #f5d494;
    --m3-warning-90: #fcedcd;
    --m3-warning-95: #fef8eb;

    --m3-info-10: #0a1d2d;
    --m3-info-40: #2e7bc2;
    --m3-info-50: #3a95e5;
    --m3-info-80: #94c9f5;
    --m3-info-90: #cde8fc;
    --m3-info-95: #ebf6fe;

    /* ========================================
       APPLIED COLORS - Light Theme Roles
       ======================================== */
    --m3-on-primary: #ffffff;
    --m3-primary: var(--m3-primary-40);
    --m3-primary-container: var(--m3-primary-90);
    --m3-on-primary-container: var(--m3-primary-10);

    --m3-on-secondary: #ffffff;
    --m3-secondary: var(--m3-secondary-40);
    --m3-secondary-container: var(--m3-secondary-90);
    --m3-on-secondary-container: var(--m3-secondary-10);

    --m3-on-tertiary: #ffffff;
    --m3-tertiary: var(--m3-tertiary-40);
    --m3-tertiary-container: var(--m3-tertiary-90);
    --m3-on-tertiary-container: var(--m3-tertiary-10);

    --m3-surface: var(--m3-neutral-99);
    --m3-surface-dim: var(--m3-neutral-90);
    --m3-surface-bright: var(--m3-neutral-100);
    --m3-surface-container-lowest: var(--m3-neutral-100);
    --m3-surface-container-low: var(--m3-neutral-95);
    --m3-surface-container: var(--m3-neutral-90);
    --m3-surface-container-high: var(--m3-neutral-80);
    --m3-surface-container-highest: var(--m3-neutral-70);

    --m3-on-surface: var(--m3-neutral-10);
    --m3-on-surface-variant: var(--m3-neutral-30);
    --m3-outline: var(--m3-neutral-50);
    --m3-outline-variant: var(--m3-neutral-80);

    --m3-inverse-surface: var(--m3-neutral-20);
    --m3-inverse-on-surface: var(--m3-neutral-95);
    --m3-inverse-primary: var(--m3-primary-80);

    --m3-scrim: rgba(0, 0, 0, 0.4);
    --m3-shadow: rgba(0, 0, 0, 0.15);

    /* ========================================
       SPACING SYSTEM - 4px Base Grid
       ======================================== */
    --m3-space-0: 0;
    --m3-space-1: 0.25rem;
    /* 4px */
    --m3-space-2: 0.5rem;
    /* 8px */
    --m3-space-3: 0.75rem;
    /* 12px */
    --m3-space-4: 1rem;
    /* 16px */
    --m3-space-5: 1.25rem;
    /* 20px */
    --m3-space-6: 1.5rem;
    /* 24px */
    --m3-space-8: 2rem;
    /* 32px */
    --m3-space-10: 2.5rem;
    /* 40px */
    --m3-space-12: 3rem;
    /* 48px */
    --m3-space-16: 4rem;
    /* 64px */
    --m3-space-20: 5rem;
    /* 80px */
    --m3-space-24: 6rem;
    /* 96px */

    /* ========================================
       BORDER RADIUS - M3 Shape System
       ======================================== */
    --m3-shape-none: 0;
    --m3-shape-xs: 0.25rem;
    /* 4px */
    --m3-shape-sm: 0.5rem;
    /* 8px */
    --m3-shape-md: 0.75rem;
    /* 12px */
    --m3-shape-lg: 1rem;
    /* 16px */
    --m3-shape-xl: 1.5rem;
    /* 24px */
    --m3-shape-2xl: 1.75rem;
    /* 28px */
    --m3-shape-full: 9999px;

    /* ========================================
       ELEVATION - M3 Shadow System
       ======================================== */
    --m3-elevation-0: none;
    --m3-elevation-1:
        0 1px 2px 0 rgba(0, 0, 0, 0.05),
        0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --m3-elevation-2:
        0 1px 2px 0 rgba(0, 0, 0, 0.06),
        0 2px 6px 0 rgba(0, 0, 0, 0.1),
        0 4px 8px -2px rgba(0, 0, 0, 0.1);
    --m3-elevation-3:
        0 2px 4px 0 rgba(0, 0, 0, 0.06),
        0 4px 12px 0 rgba(0, 0, 0, 0.1),
        0 8px 16px -4px rgba(0, 0, 0, 0.1);
    --m3-elevation-4:
        0 4px 8px 0 rgba(0, 0, 0, 0.08),
        0 8px 24px 0 rgba(0, 0, 0, 0.12),
        0 12px 32px -8px rgba(0, 0, 0, 0.12);
    --m3-elevation-5:
        0 6px 12px 0 rgba(0, 0, 0, 0.1),
        0 12px 36px 0 rgba(0, 0, 0, 0.15),
        0 20px 48px -12px rgba(0, 0, 0, 0.15);

    /* ========================================
       MOTION / ANIMATION - Spring Physics Easing
       ======================================== */

    /* Duration tokens */
    --m3-duration-instant: 50ms;
    --m3-duration-fast: 150ms;
    --m3-duration-normal: 250ms;
    --m3-duration-slow: 350ms;
    --m3-duration-slower: 500ms;

    /* Easing - M3 Emphasized (smooth deceleration) */
    --m3-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --m3-ease-standard-decelerate: cubic-bezier(0, 0, 0, 1);
    --m3-ease-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);

    /* Easing - M3 Emphasized (expressive) */
    --m3-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
    --m3-ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
    --m3-ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);

    /* Spring-like easing for bouncy feel */
    --m3-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --m3-ease-spring-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --m3-ease-spring-bouncy: cubic-bezier(0.68, -0.55, 0.27, 1.55);

    /* Exit easing */
    --m3-ease-exit: cubic-bezier(0.4, 0, 1, 1);

    /* ========================================
       Z-INDEX SCALE
       ======================================== */
    --m3-z-base: 0;
    --m3-z-dropdown: 100;
    --m3-z-sticky: 200;
    --m3-z-fixed: 300;
    --m3-z-modal-backdrop: 400;
    --m3-z-modal: 500;
    --m3-z-popover: 600;
    --m3-z-tooltip: 700;
    --m3-z-toast: 800;

    /* ========================================
       COMPONENT-SPECIFIC TOKENS
       ======================================== */

    /* Buttons */
    --m3-btn-height-sm: 2rem;
    /* 32px */
    --m3-btn-height-md: 2.5rem;
    /* 40px */
    --m3-btn-height-lg: 3rem;
    /* 48px */
    --m3-btn-padding-x: var(--m3-space-6);
    --m3-btn-radius: var(--m3-shape-full);

    /* Cards */
    --m3-card-radius: var(--m3-shape-lg);
    --m3-card-padding: var(--m3-space-6);

    /* Inputs */
    --m3-input-height: 3rem;
    /* 48px */
    --m3-input-radius: var(--m3-shape-sm);
    --m3-input-border-width: 1px;

    /* Touch targets */
    --m3-touch-target-min: 48px;
}

/* ========================================
   REDUCED MOTION - Accessibility First
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --m3-duration-instant: 0ms;
        --m3-duration-fast: 0ms;
        --m3-duration-normal: 0ms;
        --m3-duration-slow: 0ms;
        --m3-duration-slower: 0ms;

        --m3-ease-spring: linear;
        --m3-ease-spring-soft: linear;
        --m3-ease-spring-bouncy: linear;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   BASE RESETS WITH M3 DEFAULTS
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: var(--m3-font-family);
    font-size: 16px;
    line-height: var(--m3-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    font-family: var(--m3-font-family);
    font-size: var(--m3-body-large);
    font-weight: var(--m3-weight-regular);
    color: var(--m3-on-surface);
    background-color: var(--m3-surface);
    min-height: 100vh;
}

/* Typography defaults */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--m3-font-display);
    font-weight: var(--m3-weight-semibold);
    line-height: var(--m3-leading-tight);
    color: var(--m3-on-surface);
}

h1 {
    font-size: var(--m3-display-small);
}

h2 {
    font-size: var(--m3-headline-large);
}

h3 {
    font-size: var(--m3-headline-medium);
}

h4 {
    font-size: var(--m3-headline-small);
}

h5 {
    font-size: var(--m3-title-large);
}

h6 {
    font-size: var(--m3-title-medium);
}

p {
    font-size: var(--m3-body-large);
    line-height: var(--m3-leading-relaxed);
    color: var(--m3-on-surface-variant);
}

a {
    color: var(--m3-primary);
    text-decoration: none;
    transition: color var(--m3-duration-fast) var(--m3-ease-standard);
}

a:hover {
    color: var(--m3-primary-30);
}

/* Focus states for accessibility */
:focus-visible {
    outline: 2px solid var(--m3-primary);
    outline-offset: 2px;
    border-radius: var(--m3-shape-xs);
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Selection */
::selection {
    background-color: var(--m3-primary-80);
    color: var(--m3-primary-10);
}