/**
 * =============================================================================
 * AYTEN DESIGN SYSTEM - Core Stylesheet
 * =============================================================================
 *
 * This is the central design system file for Ayten. It establishes consistent
 * typography, colors, spacing, and component foundations used across all pages.
 *
 * Include this file BEFORE any other stylesheets.
 *
 * =============================================================================
 * TYPOGRAPHY HIERARCHY & GUIDANCE
 * =============================================================================
 *
 * FONT FAMILY
 * -----------
 * Primary: Roboto - A clean, modern sans-serif that works well for both
 *          headings and body text. Loaded from Google Fonts with weights
 *          300 (Light), 400 (Regular), 500 (Medium), 700 (Bold).
 *
 * Fallback Stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 *                 Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
 *
 * Monospace: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono',
 *            'Source Code Pro', Consolas, monospace
 *            Used for: code, technical data, timestamps, job IDs
 *
 * TYPE SCALE (Based on 1.125 ratio - Major Second)
 * ------------------------------------------------
 * --font-size-xs:   12px  →  Captions, timestamps, metadata badges
 * --font-size-sm:   13px  →  Secondary UI text, helper text
 * --font-size-base: 14px  →  Body text, buttons, form inputs (PRIMARY)
 * --font-size-md:   15px  →  Emphasized body, dropdown items
 * --font-size-lg:   16px  →  Large body, important info, card subtitles
 * --font-size-xl:   18px  →  Section headings, card titles
 * --font-size-2xl:  20px  →  Modal headings, feature titles
 * --font-size-3xl:  22px  →  Page section headers
 * --font-size-4xl:  24px  →  Page titles, navbar brand
 * --font-size-5xl:  28px  →  Hero subheadings, major features
 * --font-size-6xl:  32px  →  Hero text, splash screens
 *
 * FONT WEIGHTS
 * ------------
 * --font-light:    300  →  Subtle text, decorative (use sparingly)
 * --font-regular:  400  →  Body text, most content
 * --font-medium:   500  →  Buttons, labels, emphasized text
 * --font-semibold: 600  →  Subheadings, important labels
 * --font-bold:     700  →  Headings, strong emphasis
 *
 * LINE HEIGHTS
 * ------------
 * --leading-none:    1.0   →  Single-line display text only
 * --leading-tight:   1.2   →  Headings, titles
 * --leading-snug:    1.375 →  Subheadings, compact text
 * --leading-normal:  1.5   →  Body text (DEFAULT)
 * --leading-relaxed: 1.625 →  Long-form content, improved readability
 * --leading-loose:   1.8   →  Very spacious, accessibility mode
 *
 * LETTER SPACING
 * --------------
 * --tracking-tighter: -0.05em  →  Very large display text
 * --tracking-tight:   -0.025em →  Headings
 * --tracking-normal:  0        →  Body text (DEFAULT)
 * --tracking-wide:    0.025em  →  Small caps, labels
 * --tracking-wider:   0.05em   →  All-caps text
 * --tracking-widest:  0.1em    →  Uppercase buttons
 *
 * USAGE GUIDELINES
 * ----------------
 *
 * 1. HEADINGS:
 *    h1: 24-32px, font-weight 600-700, line-height 1.2
 *    h2: 20-24px, font-weight 600, line-height 1.2
 *    h3: 18-20px, font-weight 600, line-height 1.25
 *    h4: 16-18px, font-weight 500-600, line-height 1.3
 *    h5: 14-16px, font-weight 500, line-height 1.4
 *    h6: 13-14px, font-weight 500, line-height 1.4
 *
 * 2. BODY TEXT:
 *    Default: 14px, weight 400, line-height 1.5
 *    Large:   16px, weight 400, line-height 1.6
 *    Small:   13px, weight 400, line-height 1.5
 *
 * 3. UI ELEMENTS:
 *    Buttons:     14px, weight 500, uppercase optional
 *    Labels:      13-14px, weight 500
 *    Inputs:      14-16px, weight 400
 *    Badges:      12px, weight 500-600
 *    Tooltips:    13px, weight 400
 *
 * 4. NAVIGATION:
 *    Nav items:   14px, weight 500, uppercase, letter-spacing 0.5px
 *    Dropdowns:   14px, weight 400
 *    Breadcrumbs: 13px, weight 400
 *
 * 5. DATA DISPLAY:
 *    Stats/Numbers: 18-24px, weight 500-600
 *    Captions:      12px, weight 400
 *    Timestamps:    12px, weight 400, monospace optional
 *
 * =============================================================================
 */

/* =============================================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================================= */

:root {
    /* -------------------------------------------------------------------------
       TYPOGRAPHY - Font Families
       ------------------------------------------------------------------------- */
    --font-family-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                           Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

    --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono',
                        'Droid Sans Mono', 'Source Code Pro', Consolas, monospace;

    /* -------------------------------------------------------------------------
       TYPOGRAPHY - Font Sizes
       ------------------------------------------------------------------------- */
    --font-size-xs:   0.75rem;   /* 12px */
    --font-size-sm:   0.8125rem; /* 13px */
    --font-size-base: 0.875rem;  /* 14px */
    --font-size-md:   0.9375rem; /* 15px */
    --font-size-lg:   1rem;      /* 16px */
    --font-size-xl:   1.125rem;  /* 18px */
    --font-size-2xl:  1.25rem;   /* 20px */
    --font-size-3xl:  1.375rem;  /* 22px */
    --font-size-4xl:  1.5rem;    /* 24px */
    --font-size-5xl:  1.75rem;   /* 28px */
    --font-size-6xl:  2rem;      /* 32px */

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

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

    /* -------------------------------------------------------------------------
       TYPOGRAPHY - Letter Spacing
       ------------------------------------------------------------------------- */
    --tracking-tighter: -0.05em;
    --tracking-tight:   -0.025em;
    --tracking-normal:  0;
    --tracking-wide:    0.025em;
    --tracking-wider:   0.05em;
    --tracking-widest:  0.1em;

    /* -------------------------------------------------------------------------
       COLORS - Brand
       ------------------------------------------------------------------------- */
    --color-primary:       #1976D2;
    --color-primary-dark:  #1565C0;
    --color-primary-light: #42A5F5;
    --color-primary-50:    #E3F2FD;
    --color-primary-100:   #BBDEFB;

    --color-secondary:       #FF9800;
    --color-secondary-dark:  #F57C00;
    --color-secondary-light: #FFB74D;

    /* -------------------------------------------------------------------------
       COLORS - Semantic
       ------------------------------------------------------------------------- */
    --color-success:       #4CAF50;
    --color-success-dark:  #388E3C;
    --color-success-light: #81C784;

    --color-warning:       #FF9800;
    --color-warning-dark:  #F57C00;
    --color-warning-light: #FFB74D;

    --color-error:         #F44336;
    --color-error-dark:    #D32F2F;
    --color-error-light:   #E57373;

    --color-info:          #2196F3;
    --color-info-dark:     #1976D2;
    --color-info-light:    #64B5F6;

    /* -------------------------------------------------------------------------
       COLORS - Neutrals (Grey Scale)
       ------------------------------------------------------------------------- */
    --color-white:   #FFFFFF;
    --color-grey-50:  #FAFAFA;
    --color-grey-100: #F5F5F5;
    --color-grey-200: #EEEEEE;
    --color-grey-300: #E0E0E0;
    --color-grey-400: #BDBDBD;
    --color-grey-500: #9E9E9E;
    --color-grey-600: #757575;
    --color-grey-700: #616161;
    --color-grey-800: #424242;
    --color-grey-900: #212121;
    --color-black:   #000000;

    /* Text colors */
    --color-text-primary:   #212121;
    --color-text-secondary: #757575;
    --color-text-disabled:  #9E9E9E;
    --color-text-hint:      #BDBDBD;
    --color-text-inverse:   #FFFFFF;

    /* Background colors */
    --color-bg-primary:   #FFFFFF;
    --color-bg-secondary: #F5F5F5;
    --color-bg-tertiary:  #FAFAFA;

    /* Border colors */
    --color-border:       #E0E0E0;
    --color-border-light: #EEEEEE;
    --color-border-dark:  #BDBDBD;

    /* -------------------------------------------------------------------------
       SPACING
       ------------------------------------------------------------------------- */
    --spacing-0:  0;
    --spacing-1:  4px;
    --spacing-2:  8px;
    --spacing-3:  12px;
    --spacing-4:  16px;
    --spacing-5:  20px;
    --spacing-6:  24px;
    --spacing-8:  32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;

    /* -------------------------------------------------------------------------
       BORDER RADIUS
       ------------------------------------------------------------------------- */
    --radius-none: 0;
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-full: 9999px;

    /* -------------------------------------------------------------------------
       SHADOWS
       ------------------------------------------------------------------------- */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg:  0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl:  0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);

    /* Enhanced shadows for selected/active states */
    --shadow-selected:    0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
    --shadow-selected-lg: 0 8px 20px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.2);

    /* -------------------------------------------------------------------------
       TRANSITIONS
       ------------------------------------------------------------------------- */
    --transition-fast:   150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow:   300ms ease;

    /* -------------------------------------------------------------------------
       Z-INDEX SCALE
       ------------------------------------------------------------------------- */
    --z-dropdown:  1000;
    --z-sticky:    1020;
    --z-fixed:     1030;
    --z-backdrop:  1040;
    --z-modal:     1050;
    --z-popover:   1060;
    --z-tooltip:   1070;
    --z-toast:     1080;
}

/* =============================================================================
   BASE STYLES
   ============================================================================= */

/* Box sizing reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* HTML & Body base */
html {
    font-size: 16px; /* Base for rem calculations */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
}

/* =============================================================================
   TYPOGRAPHY CLASSES
   ============================================================================= */

/* Font sizes */
.text-xs   { font-size: var(--font-size-xs);   }
.text-sm   { font-size: var(--font-size-sm);   }
.text-base { font-size: var(--font-size-base); }
.text-md   { font-size: var(--font-size-md);   }
.text-lg   { font-size: var(--font-size-lg);   }
.text-xl   { font-size: var(--font-size-xl);   }
.text-2xl  { font-size: var(--font-size-2xl);  }
.text-3xl  { font-size: var(--font-size-3xl);  }
.text-4xl  { font-size: var(--font-size-4xl);  }
.text-5xl  { font-size: var(--font-size-5xl);  }
.text-6xl  { font-size: var(--font-size-6xl);  }

/* Font weights */
.font-light    { font-weight: var(--font-light);    }
.font-regular  { font-weight: var(--font-regular);  }
.font-medium   { font-weight: var(--font-medium);   }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold     { font-weight: var(--font-bold);     }

/* Line heights */
.leading-none    { line-height: var(--leading-none);    }
.leading-tight   { line-height: var(--leading-tight);   }
.leading-snug    { line-height: var(--leading-snug);    }
.leading-normal  { line-height: var(--leading-normal);  }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose   { line-height: var(--leading-loose);   }

/* Letter spacing */
.tracking-tighter { letter-spacing: var(--tracking-tighter); }
.tracking-tight   { letter-spacing: var(--tracking-tight);   }
.tracking-normal  { letter-spacing: var(--tracking-normal);  }
.tracking-wide    { letter-spacing: var(--tracking-wide);    }
.tracking-wider   { letter-spacing: var(--tracking-wider);   }
.tracking-widest  { letter-spacing: var(--tracking-widest);  }

/* Text colors */
.text-primary   { color: var(--color-text-primary);   }
.text-secondary { color: var(--color-text-secondary); }
.text-disabled  { color: var(--color-text-disabled);  }
.text-inverse   { color: var(--color-text-inverse);   }

/* Font families */
.font-sans { font-family: var(--font-family-primary); }
.font-mono { font-family: var(--font-family-mono);    }

/* Text styles */
.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }
.normal-case { text-transform: none; }

.italic     { font-style: italic; }
.not-italic { font-style: normal; }

.underline    { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* Text alignment */
.text-left   { text-align: left;   }
.text-center { text-align: center; }
.text-right  { text-align: right;  }

/* Truncation */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =============================================================================
   HEADING DEFAULTS
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--spacing-3);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
}

h1 {
    font-size: var(--font-size-4xl);
    letter-spacing: var(--tracking-tight);
}

h2 {
    font-size: var(--font-size-3xl);
    letter-spacing: var(--tracking-tight);
}

h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-semibold);
}

h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-medium);
}

h5 {
    font-size: var(--font-size-base);
    font-weight: var(--font-medium);
}

h6 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* =============================================================================
   PARAGRAPH & TEXT DEFAULTS
   ============================================================================= */

p {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
}

/* Small/caption text */
small,
.caption {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Strong/bold text */
strong, b {
    font-weight: var(--font-semibold);
}

/* Code/monospace */
code, kbd, pre, samp {
    font-family: var(--font-family-mono);
    font-size: 0.9em;
}

code {
    padding: 2px 6px;
    background-color: var(--color-grey-100);
    border-radius: var(--radius-sm);
    color: var(--color-error-dark);
}

pre {
    padding: var(--spacing-4);
    background-color: var(--color-grey-100);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

pre code {
    padding: 0;
    background: none;
    color: inherit;
}

/* =============================================================================
   LINK STYLES
   ============================================================================= */

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

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* =============================================================================
   LIST STYLES
   ============================================================================= */

ul, ol {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
    padding-left: var(--spacing-6);
}

li {
    margin-bottom: var(--spacing-1);
}

/* Remove list style */
.list-none {
    list-style: none;
    padding-left: 0;
}

/* =============================================================================
   FORM ELEMENT TYPOGRAPHY
   ============================================================================= */

input,
textarea,
select,
button {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
}

label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
}

/* Placeholder styling */
::placeholder {
    color: var(--color-text-hint);
    opacity: 1;
}

/* =============================================================================
   SELECTION STYLING
   ============================================================================= */

::selection {
    background-color: var(--color-primary-100);
    color: var(--color-primary-dark);
}

/* =============================================================================
   FOCUS STATES (Accessibility)
   ============================================================================= */

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* =============================================================================
   RESPONSIVE TYPOGRAPHY - Desktop, Tablet & Mobile
   =============================================================================

   BREAKPOINTS:
   - Desktop:  1025px and above
   - Tablet:   769px - 1024px
   - Mobile:   481px - 768px
   - Small:    480px and below

   ============================================================================= */

/* -----------------------------------------------------------------------------
   DESKTOP (Default - 1025px+)
   Optimized for comfortable reading on larger screens
   ----------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    :root {
        /* Desktop font sizes - comfortable reading distance */
        --font-size-xs:   0.75rem;   /* 12px */
        --font-size-sm:   0.8125rem; /* 13px */
        --font-size-base: 0.875rem;  /* 14px */
        --font-size-md:   0.9375rem; /* 15px */
        --font-size-lg:   1rem;      /* 16px */
        --font-size-xl:   1.125rem;  /* 18px */
        --font-size-2xl:  1.25rem;   /* 20px */
        --font-size-3xl:  1.375rem;  /* 22px */
        --font-size-4xl:  1.5rem;    /* 24px */
        --font-size-5xl:  1.75rem;   /* 28px */
        --font-size-6xl:  2rem;      /* 32px */

        /* Desktop line heights - standard spacing */
        --leading-normal: 1.5;
        --leading-relaxed: 1.625;
    }

    /* Desktop-specific heading sizes */
    h1 { font-size: var(--font-size-4xl); } /* 24px */
    h2 { font-size: var(--font-size-3xl); } /* 22px */
    h3 { font-size: var(--font-size-xl);  } /* 18px */
    h4 { font-size: var(--font-size-lg);  } /* 16px */

    /* Comfortable body text */
    body {
        font-size: var(--font-size-base); /* 14px */
    }
}

/* -----------------------------------------------------------------------------
   TABLET (769px - 1024px)
   Balanced for touch and moderate screen sizes
   ----------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        /* Tablet font sizes - slightly larger for touch targets */
        --font-size-xs:   0.75rem;   /* 12px */
        --font-size-sm:   0.8125rem; /* 13px */
        --font-size-base: 0.9375rem; /* 15px - slightly larger than desktop */
        --font-size-md:   1rem;      /* 16px */
        --font-size-lg:   1.0625rem; /* 17px */
        --font-size-xl:   1.1875rem; /* 19px */
        --font-size-2xl:  1.3125rem; /* 21px */
        --font-size-3xl:  1.4375rem; /* 23px */
        --font-size-4xl:  1.5rem;    /* 24px */
        --font-size-5xl:  1.625rem;  /* 26px */
        --font-size-6xl:  1.875rem;  /* 30px */

        /* Tablet line heights - slightly more spacious */
        --leading-normal: 1.55;
        --leading-relaxed: 1.65;
    }

    /* Tablet heading adjustments */
    h1 { font-size: var(--font-size-4xl); } /* 24px */
    h2 { font-size: var(--font-size-2xl); } /* 21px */
    h3 { font-size: var(--font-size-lg);  } /* 17px */
    h4 { font-size: var(--font-size-md);  } /* 16px */

    body {
        font-size: var(--font-size-base); /* 15px */
    }
}

/* -----------------------------------------------------------------------------
   MOBILE (481px - 768px)
   Optimized for handheld devices at arm's length
   ----------------------------------------------------------------------------- */
@media (min-width: 481px) and (max-width: 768px) {
    :root {
        /* Mobile font sizes - optimized for handheld reading */
        --font-size-xs:   0.75rem;   /* 12px */
        --font-size-sm:   0.8125rem; /* 13px */
        --font-size-base: 0.9375rem; /* 15px */
        --font-size-md:   1rem;      /* 16px */
        --font-size-lg:   1.0625rem; /* 17px */
        --font-size-xl:   1.125rem;  /* 18px */
        --font-size-2xl:  1.1875rem; /* 19px */
        --font-size-3xl:  1.25rem;   /* 20px */
        --font-size-4xl:  1.375rem;  /* 22px */
        --font-size-5xl:  1.5rem;    /* 24px */
        --font-size-6xl:  1.625rem;  /* 26px */

        /* Mobile line heights - more generous for readability */
        --leading-normal: 1.6;
        --leading-relaxed: 1.7;

        /* Slightly larger spacing for touch */
        --spacing-2: 10px;
        --spacing-3: 14px;
        --spacing-4: 18px;
    }

    /* Mobile heading sizes */
    h1 { font-size: var(--font-size-3xl); } /* 20px */
    h2 { font-size: var(--font-size-2xl); } /* 19px */
    h3 { font-size: var(--font-size-lg);  } /* 17px */
    h4 { font-size: var(--font-size-md);  } /* 16px */

    body {
        font-size: var(--font-size-base); /* 15px */
    }

    /* Larger touch targets for form elements */
    input,
    textarea,
    select,
    button {
        font-size: var(--font-size-lg); /* 17px - prevents iOS zoom */
        min-height: 44px; /* iOS touch target minimum */
    }

    /* Better tap targets for links */
    a {
        padding: 4px 0;
    }
}

/* -----------------------------------------------------------------------------
   SMALL MOBILE (480px and below)
   Optimized for compact screens
   ----------------------------------------------------------------------------- */
@media (max-width: 480px) {
    :root {
        /* Small mobile font sizes - compact but readable */
        --font-size-xs:   0.6875rem; /* 11px */
        --font-size-sm:   0.75rem;   /* 12px */
        --font-size-base: 0.875rem;  /* 14px */
        --font-size-md:   0.9375rem; /* 15px */
        --font-size-lg:   1rem;      /* 16px */
        --font-size-xl:   1.0625rem; /* 17px */
        --font-size-2xl:  1.125rem;  /* 18px */
        --font-size-3xl:  1.1875rem; /* 19px */
        --font-size-4xl:  1.25rem;   /* 20px */
        --font-size-5xl:  1.375rem;  /* 22px */
        --font-size-6xl:  1.5rem;    /* 24px */

        /* Generous line heights for small screens */
        --leading-normal: 1.6;
        --leading-relaxed: 1.75;
    }

    /* Small mobile heading sizes */
    h1 { font-size: var(--font-size-4xl); } /* 20px */
    h2 { font-size: var(--font-size-3xl); } /* 19px */
    h3 { font-size: var(--font-size-xl);  } /* 17px */
    h4 { font-size: var(--font-size-lg);  } /* 16px */

    body {
        font-size: var(--font-size-base); /* 14px */
    }

    /* Ensure form elements are touch-friendly */
    input,
    textarea,
    select,
    button {
        font-size: var(--font-size-lg); /* 16px - prevents iOS zoom */
        min-height: 48px; /* Larger touch targets */
        padding: 12px 16px;
    }

    /* Better readability for dense content */
    p {
        margin-bottom: var(--spacing-5);
    }

    /* Adjust letter spacing for small screens */
    h1, h2, h3 {
        letter-spacing: var(--tracking-tight);
    }
}

/* -----------------------------------------------------------------------------
   DEVICE-SPECIFIC UTILITY CLASSES
   ----------------------------------------------------------------------------- */

/* Show only on desktop */
.desktop-only {
    display: block;
}
@media (max-width: 1024px) {
    .desktop-only { display: none !important; }
}

/* Show only on tablet */
.tablet-only {
    display: none;
}
@media (min-width: 769px) and (max-width: 1024px) {
    .tablet-only { display: block !important; }
}

/* Show only on mobile */
.mobile-only {
    display: none;
}
@media (max-width: 768px) {
    .mobile-only { display: block !important; }
}

/* Hide on mobile */
.hide-mobile {
    display: block;
}
@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}

/* Hide on desktop */
.hide-desktop {
    display: block;
}
@media (min-width: 1025px) {
    .hide-desktop { display: none !important; }
}

/* Device-specific text sizes */
@media (max-width: 768px) {
    .text-mobile-sm   { font-size: var(--font-size-sm) !important; }
    .text-mobile-base { font-size: var(--font-size-base) !important; }
    .text-mobile-lg   { font-size: var(--font-size-lg) !important; }
}

@media (min-width: 1025px) {
    .text-desktop-sm   { font-size: var(--font-size-sm) !important; }
    .text-desktop-base { font-size: var(--font-size-base) !important; }
    .text-desktop-lg   { font-size: var(--font-size-lg) !important; }
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

/* Visually hidden but accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible only */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Prevent text selection */
.select-none {
    user-select: none;
    -webkit-user-select: none;
}

/* Allow text selection */
.select-all {
    user-select: all;
}

/* Word break utilities */
.break-normal { word-break: normal; overflow-wrap: normal; }
.break-words  { overflow-wrap: break-word; }
.break-all    { word-break: break-all; }

/* =============================================================================
   MAP FEATURE STYLES - Markers, Polylines, and Drop Shadows
   =============================================================================

   These styles define the visual appearance of map elements including:
   - Activity markers
   - Hotel/lodging markers
   - Interesting stop markers
   - Transportation polylines (routes)
   - Railroad/scenic train routes

   DROP SHADOW HIERARCHY:
   - Default state: Subtle shadow for depth
   - Highlighted state: Medium shadow with slight blue glow
   - Selected/Active state: PROMINENT shadow with strong glow

   ============================================================================= */

/* -----------------------------------------------------------------------------
   DROP SHADOW CSS VARIABLES
   ----------------------------------------------------------------------------- */
:root {
    /* Default marker shadows - subtle depth (25% less opaque) */
    --marker-shadow-default:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22))
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));

    /* Highlighted marker shadows - medium prominence (25% less opaque) */
    --marker-shadow-highlighted:
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.38))
        drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3))
        drop-shadow(0 0 8px rgba(0, 0, 0, 0.22));

    /* Selected/Active marker shadows - PROMINENT (25% less opaque) */
    --marker-shadow-selected:
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.52))
        drop-shadow(0 8px 24px rgba(0, 0, 0, 0.38))
        drop-shadow(0 0 16px rgba(0, 0, 0, 0.3))
        drop-shadow(0 0 32px rgba(0, 0, 0, 0.15));

    /* Polyline/route shadows - default */
    --polyline-shadow-default:
        drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));

    /* Polyline/route shadows - active/selected */
    --polyline-shadow-active:
        drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6))
        drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 12px rgba(0, 0, 0, 0.4));
}

/* -----------------------------------------------------------------------------
   DEFAULT MARKER STATES
   ----------------------------------------------------------------------------- */

/* Activity markers - primary venue markers */
.activity-marker-primary {
    filter: var(--marker-shadow-default);
    transition: filter 0.2s ease, transform 0.2s ease;
}

/* Hotel/lodging markers */
.hotel-marker {
    filter: var(--marker-shadow-default);
    transition: filter 0.2s ease, transform 0.2s ease;
}

/* Interesting stop markers along routes */
.interesting-stop-marker {
    background: transparent;
    border: none;
    filter: var(--marker-shadow-default);
    transition: filter 0.2s ease, transform 0.2s ease;
}

/* Generic marker icon styling */
.marker-icon {
    font-size: 24px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* -----------------------------------------------------------------------------
   HIGHLIGHTED MARKER STATE
   Used when hovering over a card or marker receives focus
   ----------------------------------------------------------------------------- */
.feature-highlighted,
.activity-marker-primary.highlighted,
.hotel-marker.highlighted,
.interesting-stop-marker.highlighted {
    filter: var(--marker-shadow-highlighted);
    transform: scale(1.05);
}

/* -----------------------------------------------------------------------------
   SELECTED/ACTIVE MARKER STATE
   Used when marker is clicked/selected - MOST PROMINENT shadow
   ----------------------------------------------------------------------------- */
.marker-selected,
.activity-marker-primary.selected,
.hotel-marker.selected,
.interesting-stop-marker.selected,
.activity-marker-primary.active,
.hotel-marker.active,
.interesting-stop-marker.active {
    filter: var(--marker-shadow-selected) !important;
    transform: scale(1.1);
    z-index: 10000 !important;
}

/* Transition for smooth state changes */
.marker-selected,
.activity-marker-primary,
.hotel-marker,
.interesting-stop-marker {
    transition: filter 0.25s ease, transform 0.25s ease, z-index 0s;
}

/* -----------------------------------------------------------------------------
   POLYLINE/ROUTE DEFAULT STATES
   ----------------------------------------------------------------------------- */

/* Itinerary route polylines (Leaflet SVG paths) */
.itinerary-route,
.itinerary-route-base {
    filter: var(--polyline-shadow-default);
    transition: filter 0.2s ease;
}

/* Shadow layer - already provides shadow, no additional filter needed */
.itinerary-route-shadow {
    /* This layer IS the shadow - no filter */
}

/* Clickable hit area - invisible */
.itinerary-route-clickable {
    /* Invisible - no visual styling */
}

/* Railroad/train route styling */
.railroad-line {
    filter: var(--polyline-shadow-default);
    transition: filter 0.2s ease;
}

/* Scenic route styling */
.scenic-train-route,
.scenic-route {
    filter: var(--polyline-shadow-default);
    transition: filter 0.2s ease;
}

/* -----------------------------------------------------------------------------
   POLYLINE/ROUTE ACTIVE/SELECTED STATES
   ----------------------------------------------------------------------------- */
.itinerary-route.selected,
.itinerary-route.active,
.itinerary-route.highlighted,
.itinerary-route-base.selected,
.itinerary-route-base.active,
.itinerary-route-base.highlighted,
.railroad-line.selected,
.railroad-line.active,
.scenic-train-route.selected,
.scenic-train-route.active,
.scenic-route.selected,
.scenic-route.active {
    filter: var(--polyline-shadow-active) !important;
}

/* Highlighted polyline state (hover) - medium prominence */
.railroad-line.highlighted,
.scenic-train-route.highlighted,
.scenic-route.highlighted {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5))
            drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

/* -----------------------------------------------------------------------------
   LEAFLET CONTROL SHADOWS
   Consistent shadows for map controls
   ----------------------------------------------------------------------------- */
.leaflet-control-zoom,
.leaflet-control-layers,
.leaflet-control-itinerary,
.leaflet-control-edit-trip,
.leaflet-control-search,
.leaflet-control-calendar,
.leaflet-control-bookmark {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

/* -----------------------------------------------------------------------------
   LEAFLET Z-INDEX OVERRIDES
   Ensure controls render below navbar/modals
   ----------------------------------------------------------------------------- */
.leaflet-control-layers {
    z-index: 800 !important;
}

.leaflet-top {
    z-index: 800 !important;
}

/* =============================================================================
   COMMON COMPONENT STYLES
   Reusable patterns extracted from inline CSS
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CARDS - Base styles
   ----------------------------------------------------------------------------- */
.card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    border: 2px solid transparent;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
    transform: translateY(-2px);
}

.card.highlighted {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

/* -----------------------------------------------------------------------------
   BUTTONS - Common patterns
   ----------------------------------------------------------------------------- */
.btn-primary {
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 12px 24px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.btn-primary .material-icons {
    font-size: 20px;
}

/* -----------------------------------------------------------------------------
   FORM ELEMENTS - Common patterns
   ----------------------------------------------------------------------------- */
.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--font-medium);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-normal);
    background: white;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

/* -----------------------------------------------------------------------------
   SLIDER STYLES
   ----------------------------------------------------------------------------- */
.form-slider,
.slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--color-grey-300);
    outline: none;
    -webkit-appearance: none;
}

.form-slider::-webkit-slider-thumb,
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
}

.form-slider::-webkit-slider-thumb:hover,
.slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.form-slider::-moz-range-thumb,
.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: none;
    transition: transform 0.2s;
}

.slider-container {
    position: relative;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* -----------------------------------------------------------------------------
   TOGGLE SWITCH
   ----------------------------------------------------------------------------- */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-grey-300);
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 1px var(--color-primary);
}

/* -----------------------------------------------------------------------------
   LOADING OVERLAYS & SPINNERS
   ----------------------------------------------------------------------------- */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.loading-overlay.active {
    display: flex;
}

.page-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: var(--color-grey-100);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.page-loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.page-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.page-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-grey-300);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: page-spin 0.8s linear infinite;
}

@keyframes page-spin {
    to { transform: rotate(360deg); }
}

.page-loading-text {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    font-weight: var(--font-medium);
}

/* -----------------------------------------------------------------------------
   ANIMATIONS
   ----------------------------------------------------------------------------- */
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}