/**
 * MyRent Design System — CSS Custom Properties
 * Version: 1.0.0 | April 2026
 * Generated by: myrent-design-system v1.0
 *
 * Usage: import this file as the first stylesheet
 *   @import 'tokens.css';
 *
 * Prefix: --mr- (MyRent)
 * Naming: --mr-{category}-{variant}-{subvariant}
 */

:root {

  /* ============================================================
     BRAND COLORS
  ============================================================ */

  /* Primary palette */
  --mr-color-brand-turquoise:       #2DBEBE;
  --mr-color-brand-turquoise-light: #00FFFF;
  --mr-color-brand-turquoise-dark:  #155858;
  --mr-color-brand-yellow:          #FCD502;
  --mr-color-brand-yellow-light:    #FFEC83;
  --mr-color-brand-black:           #1E1E1E;
  --mr-color-brand-black-light:     #3A3A3C;
  --mr-color-brand-white:           #FFFFFF;

  /* Brand gradients */
  --mr-gradient-horizontal: linear-gradient(to right, #2DBEBE, #00FFFF);
  --mr-gradient-vertical:   linear-gradient(to bottom, #2DBEBE, #155858);

  /* ============================================================
     NEUTRAL SCALE
  ============================================================ */

  --mr-color-neutral-50:  #FAFAFA;
  --mr-color-neutral-100: #F5F5F5;
  --mr-color-neutral-200: #E0E0E0;
  --mr-color-neutral-300: #CCCCCC;
  --mr-color-neutral-400: #8F8F8F;
  --mr-color-neutral-500: #5A5A5A;
  --mr-color-neutral-600: #2F2F2F;
  --mr-color-neutral-700: #3A3A3C;
  --mr-color-neutral-900: #1E1E1E;

  /* ============================================================
     SEMANTIC COLORS
  ============================================================ */

  --mr-color-success:        #276749;
  --mr-color-success-bg:     #C6F6D5;
  --mr-color-warning:        #92400E;
  --mr-color-warning-bg:     #FEF3C7;
  --mr-color-error:          #E53E3E;
  --mr-color-error-bg:       #FED7D7;
  --mr-color-info:           #4A5568;
  --mr-color-info-bg:        #E2E8F0;

  /* ============================================================
     SEMANTIC ALIASES (RECOMMENDED FOR COMPONENT USE)
  ============================================================ */

  /* Text */
  --mr-color-text-primary:   var(--mr-color-neutral-900);    /* Headings, body */
  --mr-color-text-secondary: var(--mr-color-neutral-700);    /* Subtitles, metadata */
  --mr-color-text-disabled:  var(--mr-color-neutral-400);    /* Placeholder, hint */
  --mr-color-text-inverse:   var(--mr-color-brand-white);    /* Text on dark background */
  --mr-color-text-accent:    var(--mr-color-brand-turquoise);/* Links, accents */

  /* Background */
  --mr-color-bg-primary:   var(--mr-color-brand-white);      /* Main page background */
  --mr-color-bg-secondary: var(--mr-color-neutral-50);       /* Alternate background */
  --mr-color-bg-disabled:  var(--mr-color-neutral-100);      /* Disabled element background */

  /* Border */
  --mr-color-border-default: var(--mr-color-neutral-200);    /* Standard border */
  --mr-color-border-focus:   var(--mr-color-brand-turquoise);/* Focus ring */
  --mr-color-border-error:   var(--mr-color-error);          /* Error border */

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

  /* Font families */
  --mr-font-family-primary: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mr-font-family-brand:   Montserrat, Arial, sans-serif;

  /* Font sizes */
  --mr-font-size-display-xl: 56px;
  --mr-font-size-display-l:  40px;
  --mr-font-size-h1:         32px;
  --mr-font-size-h2:         24px;
  --mr-font-size-h3:         20px;
  --mr-font-size-h4:         18px;
  --mr-font-size-body-l:     16px;
  --mr-font-size-body-m:     14px;
  --mr-font-size-body-s:     12px;
  --mr-font-size-label:      13px;
  --mr-font-size-button:     15px;
  --mr-font-size-kpi:        36px;

  /* Font weights */
  --mr-font-weight-regular:  400;
  --mr-font-weight-medium:   500;
  --mr-font-weight-semibold: 600;
  --mr-font-weight-bold:     700;

  /* Line heights */
  --mr-line-height-tight:   1.15;   /* Headings and display */
  --mr-line-height-normal:  1.30;   /* Labels and compact UI */
  --mr-line-height-relaxed: 1.60;   /* Long-form text */

  /* ============================================================
     SPACING — 4px base scale
  ============================================================ */

  --mr-spacing-1:  4px;   /* xxs */
  --mr-spacing-2:  8px;   /* xs  */
  --mr-spacing-3:  12px;  /* sm  */
  --mr-spacing-4:  16px;  /* md  — standard */
  --mr-spacing-6:  24px;  /* lg  */
  --mr-spacing-8:  32px;  /* xl  */
  --mr-spacing-12: 48px;  /* 2xl */
  --mr-spacing-16: 64px;  /* 3xl */
  --mr-spacing-24: 96px;  /* 4xl */

  /* ============================================================
     BORDER RADIUS
  ============================================================ */

  --mr-radius-s:      4px;
  --mr-radius-m:      8px;
  --mr-radius-l:      12px;
  --mr-radius-xl:     16px;
  --mr-radius-button: 6px;
  --mr-radius-input:  6px;
  --mr-radius-badge:  12px;
  --mr-radius-full:   9999px;

  /* ============================================================
     SHADOW AND ELEVATION
  ============================================================ */

  --mr-shadow-elev-0: none;
  --mr-shadow-elev-1: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  --mr-shadow-elev-2: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
  --mr-shadow-elev-3: 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
  --mr-shadow-elev-4: 0px 16px 40px 0px rgba(0, 0, 0, 0.20);

  /* ============================================================
     MOTION — Durations and easing
  ============================================================ */

  --mr-motion-duration-fast:    100ms;
  --mr-motion-duration-default: 200ms;
  --mr-motion-duration-slow:    400ms;

  --mr-motion-easing-standard: ease;
  --mr-motion-easing-enter:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --mr-motion-easing-exit:     cubic-bezier(0.4, 0.0, 1.0, 1.0);

  /* Transition shorthands */
  --mr-transition-default: all var(--mr-motion-duration-default) var(--mr-motion-easing-standard);
  --mr-transition-slow:    all var(--mr-motion-duration-slow) var(--mr-motion-easing-standard);

  /* ============================================================
     GRID AND LAYOUT
  ============================================================ */

  /* Desktop >= 1024px */
  --mr-grid-desktop-columns:  12;
  --mr-grid-desktop-gutter:   24px;
  --mr-grid-desktop-margin:   32px;
  --mr-grid-desktop-max-width: 1440px;

  /* Tablet 768–1023px */
  --mr-grid-tablet-columns: 8;
  --mr-grid-tablet-gutter:  16px;
  --mr-grid-tablet-margin:  24px;

  /* Mobile < 768px */
  --mr-grid-mobile-columns: 4;
  --mr-grid-mobile-gutter:  16px;
  --mr-grid-mobile-margin:  16px;

  /* Sidebar */
  --mr-sidebar-expanded:  240px;
  --mr-sidebar-collapsed: 64px;

  /* Content area padding */
  --mr-content-padding-desktop: 32px;
  --mr-content-padding-tablet:  24px;
  --mr-content-padding-mobile:  16px;

  /* ============================================================
     FOCUS RING — Accessibility WCAG 2.1 AA
  ============================================================ */

  --mr-focus-ring-width:  2px;
  --mr-focus-ring-offset: 2px;
  --mr-focus-ring-color:  var(--mr-color-brand-turquoise);
  --mr-focus-ring:        var(--mr-focus-ring-width) solid var(--mr-focus-ring-color);

  /* ============================================================
     Z-INDEX SCALE
  ============================================================ */

  --mr-z-base:      0;
  --mr-z-raised:    10;
  --mr-z-dropdown:  100;
  --mr-z-sticky:    200;
  --mr-z-overlay:   300;
  --mr-z-modal:     400;
  --mr-z-toast:     500;
  --mr-z-tooltip:   600;
}

/* ============================================================
   DARK MODE (Media Query)
   Note: future expansion — override only necessary tokens
============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --mr-color-bg-primary:    #000000;
    --mr-color-bg-secondary:  #1C1C1E;
    --mr-color-text-primary:  #F5F5F5;
    --mr-color-text-secondary: #AEAEB2;
    --mr-color-border-default: #3A3A3C;
  }
}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mr-motion-duration-fast:    0ms;
    --mr-motion-duration-default: 0ms;
    --mr-motion-duration-slow:    0ms;
    --mr-transition-default:      none;
    --mr-transition-slow:         none;
  }
}

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

/* Standard focus ring — apply to all interactive elements */
.mr-focus-ring:focus-visible {
  outline: var(--mr-focus-ring);
  outline-offset: var(--mr-focus-ring-offset);
}

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