/* =====================================================================
   HARTAMAS FAST CLAIM — Base Design System
   Colors: Black (#111) + Yellow (#F5C518)
   On black → white text | On yellow → black text
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── Design Tokens ── */
:root {
  /* Brand */
  --brand:        #F5C518;
  --brand-strong: #e6b400;
  --brand-dark:   #b38c00;
  --brand-soft:   #fff7d4;
  --brand-glow:   rgba(245, 197, 24, 0.25);
  --on-brand:     #111111;

  /* Surfaces */
  --surface-900:  #0d0d0d;  /* deepest black */
  --surface-800:  #111111;  /* app background dark */
  --surface-700:  #161619;  /* header / sidebar bg */
  --surface-600:  #1e1e22;  /* card on dark */
  --surface-500:  #26262b;  /* border on dark */
  --surface-400:  #2e2e34;  /* hover on dark */

  /* Light Surfaces */
  --bg:           #f5f5f3;
  --card:         #ffffff;
  --card2:        #faf9f6;
  --card3:        #f2f1ee;

  /* Borders */
  --line:         #eae9e4;
  --line2:        #dad9d2;
  --line-dark:    #26262b;

  /* Text */
  --ink:          #111111;
  --ink2:         #5a5a63;
  --ink3:         #8c8c95;
  --ink4:         #b0b0b8;
  --white:        #ffffff;
  --white70:      rgba(255,255,255,0.7);
  --white40:      rgba(255,255,255,0.4);

  /* Status */
  --ok:           #12793b;
  --ok-bg:        #e7f4ea;
  --ok-border:    #bfe3ca;
  --warn:         #8a5a00;
  --warn-bg:      #fbf0d3;
  --warn-border:  #f0dca8;
  --bad:          #c22626;
  --bad-bg:       #fbe9e7;
  --bad-border:   #f0cfcb;
  --info:         #0b5cad;
  --info-bg:      #e7f0fb;
  --info-border:  #cfe0f5;
  --purple:       #6d4aff;
  --purple-bg:    #ede9ff;
  --purple-border:#c4b8ff;

  /* Shape */
  --r-sm:         6px;
  --r-md:         10px;
  --r-lg:         14px;
  --r-xl:         18px;
  --r-2xl:        24px;
  --r-pill:       999px;

  /* Shadow */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-md:    0 1px 2px rgba(0,0,0,0.05), 0 10px 28px -16px rgba(0,0,0,0.15);
  --shadow-lg:    0 4px 6px rgba(0,0,0,0.05), 0 20px 40px -12px rgba(0,0,0,0.18);
  --shadow-xl:    0 8px 16px rgba(0,0,0,0.08), 0 32px 64px -16px rgba(0,0,0,0.22);
  --shadow-brand: 0 4px 20px rgba(245,197,24,0.3);

  /* Focus Ring */
  --ring:         0 0 0 3px rgba(245,197,24,0.4);
  --ring-dark:    0 0 0 3px rgba(245,197,24,0.6);

  /* Transitions */
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --t-fast:       0.12s;
  --t-base:       0.18s;
  --t-slow:       0.28s;

  /* Sidebar */
  --sidebar-w:    240px;
  --sidebar-w-collapsed: 64px;
  --header-h:     60px;
}

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

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p { color: var(--ink2); }

a {
  color: var(--brand-dark);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--on-brand); text-decoration: underline; }

/* ── Utility ── */
.muted      { color: var(--ink3); font-size: 0.85rem; }
.muted-sm   { color: var(--ink3); font-size: 0.78rem; }
.text-white { color: var(--white); }
.text-brand { color: var(--brand); }
.text-ok    { color: var(--ok); }
.text-bad   { color: var(--bad); }
.text-warn  { color: var(--warn); }
.fw-600     { font-weight: 600; }
.fw-700     { font-weight: 700; }
.fw-800     { font-weight: 800; }
.mono       { font-variant-numeric: tabular-nums; }
.trunc      { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.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;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink4); }

/* ── Focus visible ── */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Print ── */
@media print {
  .no-print { display: none !important; }
}