/* ============================================================
   css/style.css — URHIDU Documentation
   CSS Variables, Reset, Base
   ============================================================ */

:root {
  /* Brand Colors */
  --color-gold:          #FF9D00;
  --color-gold-light:    #FFEDD4;
  --color-gold-dark:     #FF9D00;
  --color-dark:          #111111;
  --color-dark-soft:     #1A1A1A;
  --color-surface:       #F8F9FA;
  --color-white:         #FFFFFF;

  /* Text Colors */
  --color-text-primary:   #111111;
  --color-text-secondary: #4A5568;
  --color-text-muted:     #718096;
  --color-text-inverse:   #FFFFFF;

  /* Border & Dividers */
  --color-border:         #E8ECEF;
  --color-border-strong:  #D0D5DD;

  /* Status Colors */
  --color-info-bg:        #EFF6FF;
  --color-info-border:    #BFDBFE;
  --color-info-text:      #1D4ED8;
  --color-warning-bg:     #FFFBEB;
  --color-warning-border: #FDE68A;
  --color-warning-text:   #92400E;
  --color-tip-bg:         #F0FDF4;
  --color-tip-border:     #BBF7D0;
  --color-tip-text:       #166534;

  /* Typography */
  --font-primary:    'Poppins', sans-serif;
  --font-body:       'Lato', sans-serif;

  /* Font Sizes */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

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

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-gold: 0 4px 20px rgba(255,215,0,0.25);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  /* Layout */
  --sidebar-width:    272px;
  --header-height:    64px;
  --content-max:      760px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-primary);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.no-scroll {
  overflow: hidden;
}

/* Screen-reader only */
.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;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

address {
  font-style: normal;
}

code {
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
}