/* Core CSS: tokens, reset, base elements */
@layer base {
  :root {
    /* Supabase-like modern palette with amber brand */
    --color-brand: #f59e0b; /* amber */
    --color-brand-dark: #b45309;
    --color-brand-rgb: 245, 158, 11; /* RGB components for rgba() usage */

    /* Light theme defaults */
    --color-bg: #0b1215; /* supabase dark base for light-theme fallback */
    --color-surface: #0f171a;
    --color-surface-2: #142026;
    --color-surface-3: #1b2a33;
    --color-text: #e5f0f6;
    --color-text-muted: #9fb4bf;
    --color-border: #20323d;
    --color-border-hover: #2a434f;
    /* Inactive dark (used for always-dark accents/icons)
       Light theme: deep gray; Dark theme overrides below */
    --color-inactive-dark: #1f2937;

    /* Semantic - Base Colors */
    --color-success: #16a34a;
    --color-success-rgb: 22, 163, 74; /* RGB components for rgba() usage */
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #3b82f6;
    --color-purple: #a855f7;

    /* Semantic - Domain-Specific (Rental Periods) */
    --color-period-draft: var(--color-warning);
    --color-period-current: var(--color-info);
    --color-period-upcoming: var(--color-success);
    --color-period-past: var(--color-text-muted);

    /* Semantic - Domain-Specific (Profile Types) */
    --color-type-client: var(--color-info);
    --color-type-employee: var(--color-success);
    --color-type-supplier: var(--color-warning);

    /* Semantic - Domain-Specific (Asset/Payment Status) */
    --color-status-available: var(--color-success);
    --color-status-rented: var(--color-info);
    --color-status-maintenance: var(--color-purple);
    --color-status-repair: var(--color-danger);
    --color-status-retired: var(--color-text-muted);
    --color-status-pending: var(--color-warning);
    --color-status-completed: var(--color-success);
    --color-status-succeeded: var(--color-success);
    --color-status-failed: var(--color-danger);
    --color-status-declined: var(--color-danger);
    --color-status-refunded: var(--color-info);
    --color-status-cancelled: var(--color-text-muted);

    /* Subtle background variants (10% opacity for backgrounds) */
    --color-brand-subtle: rgba(245, 158, 11, 0.1);
    --color-success-subtle: rgba(22, 163, 74, 0.1);
    --color-warning-subtle: rgba(245, 158, 11, 0.1);
    --color-danger-subtle: rgba(239, 68, 68, 0.1);
    --color-info-subtle: rgba(59, 130, 246, 0.1);
    --color-purple-subtle: rgba(168, 85, 247, 0.1);
    --color-muted-subtle: rgba(159, 180, 191, 0.1);

    /* Alpha channel variants (20% opacity for overlays) */
    --color-brand-alpha: rgba(245, 158, 11, 0.2);
    --color-success-alpha: rgba(22, 163, 74, 0.2);
    --color-warning-alpha: rgba(245, 158, 11, 0.2);
    --color-danger-alpha: rgba(239, 68, 68, 0.2);
    --color-info-alpha: rgba(59, 130, 246, 0.2);
    --color-purple-alpha: rgba(168, 85, 247, 0.2);

    /* Background and border subtle variants */
    --color-bg-subtle: rgba(15, 23, 26, 0.5);
    --color-border-subtle: rgba(32, 50, 61, 0.5);

    /* Admin-customizable calendar status colors */
    --color-status-draft: var(--color-warning);
    --color-status-draft-bg: var(--color-warning-subtle);
    --color-status-confirmed: var(--color-info);
    --color-status-confirmed-bg: var(--color-info-subtle);
    --color-status-available-bg: var(--color-success-subtle);
    --color-status-maintenance-bg: var(--color-purple-subtle);

    /* Calendar-specific sizing and spacing */
    --calendar-dot-size: 6px;
    --calendar-dot-gap: 2px;

    /* Typography */
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem;
    --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75;

    /* Spacing */
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;

    /* Radius, shadows */
    --radius-sm: .125rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-full: 9999px;
    /* Flat UI: neutralize all default shadows */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;

    /* Layout vars used by UI */
    --sidebar-width-expanded: 300px;
    --sidebar-width-compact: 80px;
    --content-padding: 1rem;
    --content-bottom-gap: 5px;
    --footer-extra-gap: 10px;
    
    /* Dynamic viewport height - updated by JS for cross-platform compatibility */
    --app-height: 100vh;
  }

  /* Dark theme base (overridden by themes/dark.css when loaded) */
  :root[data-theme="dark"] {
    /* Keep cohesive with base above (already dark leaning), but deepen surfaces */
    --color-bg: #0b1215;
    --color-surface: #0f171a;
    --color-surface-2: #142026;
    --color-surface-3: #1b2a33;
    --color-text: #e5f0f6;
    --color-text-muted: #9fb4bf;
    --color-border: #20323d;
    --color-brand: #f59e0b;
    --color-brand-dark: #d97706;
    --color-inactive-dark: #0e151a;
  }

  /* Light theme base (moved inline so data-theme controls vars without extra files) */
  :root[data-theme="light"] {
    --color-bg: #ffffff;
    --color-surface: #f8fafc;
    --color-surface-2: #f1f5f9;
    --color-surface-3: #e2e8f0;
    --color-text: #0f172a;
    --color-text-muted: #475569;
    --color-border: #e2e8f0;

    --color-brand: #f59e0b;
    --color-brand-dark: #b45309;
  }

  /* Reset */
  *,*::before,*::after{box-sizing:border-box; margin:0; padding:0}
  html{font-family:var(--font-sans); line-height:var(--leading-normal); color:var(--color-text); background:var(--color-bg); height:100%;}
  body{
    /* Lock body to viewport height across browsers; prevent page scroll */
    min-height:100vh;
    min-height:100svh;
    min-height:100dvh;
    height:-webkit-fill-available;
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }

  a{color:var(--color-brand); text-decoration:none}
  a:hover{text-decoration:underline}

  /* Aspect ratios */
  .aspect-license{aspect-ratio:1.586}

  /* Autofill detection - triggers animationstart event */
  @keyframes onAutoFillStart {
    from {/**/}
    to {/**/}
  }

  input:-webkit-autofill {
    animation-name: onAutoFillStart;
    animation-duration: 0.001s;
  }
}