/*──────────────────────────────────────────────────────────────────────────────
  base.css — Global design tokens, resets, and utilities
──────────────────────────────────────────────────────────────────────────────*/
:root {
  /* Spacing Scale */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;

  /* Border Radii */
  --radius-sm:  0.25rem;
  --radius-md:  0.5rem;
  --radius-lg:  1rem;

  /* Breakpoints */
  --bp-sm:  32rem;  /* 512px */
  --bp-md:  48rem;  /* 768px */
  --bp-lg:  64rem;  /*1024px */
  --bp-xl:  75rem;  /*1200px */

  /* Type Scale & Line-heights */
  --fs-h1:      2.5rem;  /* ~40px */
  --fs-h2:      1.7rem;  /* ~32px */
  --fs-h3:      1.2rem;  /* ~20px */
  --fs-body:    1rem;    /* 16px */
  --fs-footer:  0.8rem;
  --fs-button:	1.2rem;
  --fs-small:   0.875rem;/* 14px */
  --lh-heading: 1.2;
  --lh-body:    1.6;
  --lh-footer:  1.2;

  /* Color Palette */
  --color-text:           var(--color-gray-800);  
  --color-bg-light:       var(--color-gray-50);  
  --color-bg-dark:        var(--color-gray-900);  
  --color-border:         var(--color-gray-300); 
  --color-muted:          var(--color-gray-500);

  --color-primary:        #007AFF;
  --color-primary-dark:   #0051A8;
  --color-on-primary:     #FFFFFF;

  --color-success:        #34C759;
  --color-success-dark:   #28A745;
  --color-on-success:     #FFFFFF;

  --color-danger:         #FF3B30;
  --color-danger-dark:    #CC2B26;
  --color-on-danger:      #FFFFFF;

  --color-info:           #5AC8FA;
  --color-info-dark:      #3A9FD9;
  --color-on-info:        #FFFFFF;

  --color-warning:        #FFCC00;
  --color-on-warning:     #333333;
  
  /* Gray Scale */
  --color-gray-50:        #F9FAFB;
  --color-gray-100:       #F3F4F6;
  --color-gray-200:       #E5E7EB;
  --color-gray-300:       #D1D5DB;
  --color-gray-400:       #9CA3AF;
  --color-gray-500:       #6B7280;
  --color-gray-600:       #4B5563;
  --color-gray-700:       #374151;
  --color-gray-800:       #1F2937;
  --color-gray-900:       #111827;
  
  --color-form-bg: 		  #ffffff;
  --color-overlay: 		  rgba(0,0,0,0.4);
  --color-surface-light:  #F7F7F7;

  /* Z-Index Scale */
  --z-base:       0;
  --z-dropdown:   1000;
  --z-modal:      2000;
  --z-toast:      3000;

  /* Shadow Presets */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:    0 10px 24px rgba(0,0,0,0.15);
  
  /* Font Weights */
  --fw-thin:         100;
  --fw-extra-light:  200;
  --fw-light:        300;
  --fw-normal:       400; /* regular body text */
  --fw-medium:       500;
  --fw-semibold:     600; /* headings, strong labels */
  --fw-bold:         700; /* buttons, emphasis */
  --fw-extra-bold:   800;
  --fw-black:        900;
  
  /* your existing color tokens */
  --color-button-bg:          #4CAF50;
  --color-button-bg-hover:    #43A047;
  --color-button-bg-focus:    #81C784;
  --color-button-bg-disabled: #C8E6C9;
  
  --color-button-bg:          #2196F3;  /* Blue 500 */
  --color-button-bg-hover:    #1976D2;  /* Blue 700 */
  --color-button-bg-focus:    #64B5F6;  /* Blue 300 */
  --color-button-bg-disabled: #BBDEFB;  /* Blue 100 */

  /* if you want a token for the text color */
  --color-button-fg:          #fff;
  --color-button-fg-disabled: #e0e0e0;
}

/*──────────────────────────────────────────────────────────────────────────────
  Reset & Box-Sizing
──────────────────────────────────────────────────────────────────────────────*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*──────────────────────────────────────────────────────────────────────────────
  Base Layout
──────────────────────────────────────────────────────────────────────────────*/
html {
  font-size: clamp(14px, 1.2vw, 18px);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background-color: var(--color-bg-light);
  color: var(--color-text);
  line-height: var(--lh-body);
  font-family: system-ui, sans-serif;
}

/*──────────────────────────────────────────────────────────────────────────────
  Typography
──────────────────────────────────────────────────────────────────────────────*/
h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }

/*──────────────────────────────────────────────────────────────────────────────
  Links & Focus
──────────────────────────────────────────────────────────────────────────────*/
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
a:hover,
a:focus {
  color: var(--color-primary-dark);
}
:focus-visible {
  outline: 2px dashed var(--color-primary);
  outline-offset: 2px;
}

.btn {
  display: inline-block;
  font: inherit;
  color: var(--color-button-fg);
  background-color: var(--color-button-bg);
  border: none;
  padding: 0.5em 1em;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.2s ease-in-out,
    color            0.2s ease-in-out;
}

/* Hover & focus */
.btn:hover,
.btn:focus {
  background-color: var(--color-button-bg-hover);
}

.btn:focus-visible {
  outline: 2px solid var(--color-button-bg-focus);
  outline-offset: 2px;
}

/* Disabled state (for <button disabled> or .btn--disabled) */
.btn:disabled,
.btn.btn--disabled {
  background-color: var(--color-button-bg-disabled);
  color: var(--color-button-fg-disabled);
  cursor: not-allowed;
  pointer-events: none;
}


/*──────────────────────────────────────────────────────────────────────────────
  Forms & Controls
──────────────────────────────────────────────────────────────────────────────*/
input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--color-primary);
}

::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

/*──────────────────────────────────────────────────────────────────────────────
  Fluid Media
──────────────────────────────────────────────────────────────────────────────*/
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/*──────────────────────────────────────────────────────────────────────────────
  Utilities
──────────────────────────────────────────────────────────────────────────────*/
/* Screen-reader only */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static !important;
  width: auto; height: auto;
  margin: 0; clip: auto;
  white-space: normal;
}

/* Hide scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Clearfix */
.clearfix::after {
  content: ""; display: table; clear: both;
}

/* Center text */
.centered { text-align: center; }

/* Hide svg definitions */
.svg-sprite {
	position: absolute;
	width: 0; height: 0;
	overflow: hidden;
}

.hidden {
	display: none;
}

/*──────────────────────────────────────────────────────────────────────────────
  Reduced Motion
──────────────────────────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/*──────────────────────────────────────────────────────────────────────────────
  Dark-mode support (optional)
──────────────────────────────────────────────────────────────────────────────*/
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--color-bg-dark);
    color: var(--color-bg-light);
  }
  a:hover,
  a:focus { color: var(--color-info); }
}