/* ==========================================================
   Delhi25 · base.css (v2.3-cleaned)
   Tokens + Foundation + Typography defaults + Minimal utilities
   ========================================================== */

/* ============================
   1) TOKENS
============================ */
:root{
  /* Font */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Arial, sans-serif;

  --grey-10:#191919;
  --grey-09:#393939;
  --grey-08:#595959;
  --grey-07:#696969;
  --grey-06:#898989;
  --grey-05:#aeaeae;
  --grey-04:#c9c9c9;
  --grey-03:#d9d9d9;
  --grey-02:#dedede;
  --grey-01:#f7f7f7;

  /* Brand */
  --brand-green:#b5be35;
  --brand-grey:#555642;
  --brand-green-text:#8e9600;

  --logo-green: var(--brand-green);
  --logo-dark:  var(--brand-grey);

  /* Semantics */
  --bg-page:#fff;
  --surface:#fff;

  --text: var(--grey-08);
  --text-strong: var(--grey-10);
  --text-muted: var(--grey-06);
  --border: var(--grey-02);

  --bg-grad-screen:
    linear-gradient(
      to bottom,
      #f8f8f4 0%,
      #f8f8f4 6%,
      #ffffff 72%,
      #ffffff 100%
    );

  /* Optional helpers */
  --bg-solid-page:#ffffff;
  --border-y-grad-center:
    linear-gradient(
      90deg,
      var(--surface) 0%,
      #d7d7a7 50%,
      var(--surface) 100%
    );

  /* SVG icon gradient */
  --icon-grad-start: var(--brand-green);
  --icon-grad-end:   var(--brand-grey);

  /* Soft tints (keep if actually used in UI) */
  --d25-soft-grey:#f8f8f4;
  --d25-soft-green:#f6f8d8;

  /* Spacing */
  --s4:0.25rem; --s6:0.375rem; --s8:0.5rem; --s10:0.625rem;
  --s12:0.75rem; --s14:0.875rem; --s16:1rem; --s20:1.25rem;
  --s24:1.5rem; --s32:2rem; --s40:2.5rem; --s48:3rem; --s64:4rem;

  /* Radius */
  --r4:0.25rem; --r6:0.375rem; --r8:0.5rem; --r10:0.625rem;
  --r12:0.75rem; --r14:0.875rem; --r16:1rem; --r18:1.125rem;

  --radius-control: var(--r8);
  --radius-card: var(--r12);
  --radius-surface: var(--r16);
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-1: 0 2px 2px rgba(0,0,0,0.06);
  --shadow-2: 0 4px 6px rgba(0,0,0,0.06);
  --shadow-3: 0 10px 20px rgba(0,0,0,0.10);

  /* Type */
  --p-0:1rem;
  --p-1:1.0625rem;
  --p-2:1.125rem;
  --p-3:1.25rem;
  --p-4:1.375rem;

  --p-s-1:0.9375rem;
  --p-s-2:0.875rem;
  --p-s-3:0.8125rem;
  --p-s-4:0.75rem;

  --h1-size:1.75rem;
  --h2-size:1.5rem;
  --h3-size:1.25rem;
  --h4-size:1.125rem;

  --lh-body:1.6;
  --lh-tight:1.3;
  --lh-ui:1.15;

  --track-body:-0.005em;
  --track-tight:-0.01em;
  --track-micro-1:0.01em;
  --track-micro-2:0.015em;

  --w-regular:400;
  --w-medium:500;
  --w-semibold:600;

  --ease-out:cubic-bezier(.2,.8,.2,1);
  --dur-1:120ms;
  --dur-2:200ms;

  --b1:1px;

  --z-base:1;
  --z-header:100;
  --z-dropdown:200;
  --z-modal:300;
  --z-toast:400;

  --focus-ring: 2px solid rgba(170,196,45,0.35);
  --focus-offset: 2px;
}

/* ============================
   SVG ICON SYSTEM (CRITICAL)
============================ */
svg{ fill: currentColor; }

/* Gradient icons
   Usage: <svg class="d25-icon is-grad"><use href="#..."></use></svg>
*/
svg.is-grad{
  fill: url(#d25-icon-gradient);
  color: transparent;
}
svg.is-grad *{ fill: inherit; }

/* Smooth fill transitions (safe) */
svg *{ transition: fill var(--dur-2) var(--ease-out); }

/* Crisp premium edge (opt-in) */
svg.d25-icon.is-edge use{
  stroke: rgba(255,255,255,0.28);
  stroke-width: 2px;
  paint-order: stroke fill;
}

/* ============================
   2) FOUNDATION
============================ */
*,
*::before,
*::after{ box-sizing: border-box; }

html{
  font-family: var(--font-sans);
  font-size: 100%;
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);

  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;

  font-kerning: normal;
  font-optical-sizing: auto;
  font-feature-settings: "liga" 1, "calt" 1;
  font-variant-ligatures: common-ligatures contextual;
}

body{
  margin: 0;
  color: var(--text);
  font-family: inherit;
  font-size: var(--p-0);
  font-weight: var(--w-regular);
  line-height: inherit;
  letter-spacing: inherit;
  position: relative;
  background: transparent;
}

/* Background gradient is applied once, behind the whole app */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-grad-screen);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

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

img,
svg,
video,
canvas{
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
select,
textarea{
  font: inherit;
  color: inherit;
}

button{ cursor: pointer; }

:focus-visible{
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Reduce motion without breaking layout */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================
   3) TYPOGRAPHY
============================ */
p{ margin: 0; }

h1,h2,h3,h4,h5,h6{
  font-family: inherit;
  font-weight: var(--w-semibold);
  color: var(--text-strong);
  letter-spacing: var(--track-tight);
  margin: 0;
}

h1{ font-size: var(--h1-size); line-height: 1.2; }
h2{ font-size: var(--h2-size); line-height: 1.25; }
h3{ font-size: var(--h3-size); line-height: 1.3; }
h4{ font-size: var(--h4-size); line-height: 1.35; }
h5{ font-size: 1rem; line-height: 1.45; letter-spacing: 0; }
h6{ font-size: 0.9375rem; line-height: 1.45; letter-spacing: 0; }

/* ============================
   4) UTILITIES (minimal kit)
============================ */
.flex{ display:flex; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-8{ gap: var(--s8); }

.r-sm{ border-radius: var(--radius-control); }
.r-md{ border-radius: var(--radius-card); }
.r-lg{ border-radius: var(--radius-surface); }
.r-pill{ border-radius: var(--radius-pill); }

.b-1{ border: var(--b1) solid var(--border); }
.b-0{ border: 0; }

.c-text{ color: var(--text); }
.c-strong{ color: var(--text-strong); }
.c-muted{ color: var(--text-muted); }

.f-regular{ font-weight: var(--w-regular); }
.f-medium{ font-weight: var(--w-medium); }
.f-semibold{ font-weight: var(--w-semibold); }

/* ============================
   5) GLOBAL HELPERS
============================ */
.material-symbols-rounded{
  font-variation-settings: "opsz" 20, "wght" 400, "FILL" 0, "GRAD" 0;
}

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

.btn-arrow{
  width: 32px;
  height: 32px;
  border: 2px solid var(--grey-02);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-08);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

@media (hover:hover){
  .btn-arrow:hover{
    color: var(--grey-09);
    background: var(--grey-01);
  }
}

.btn-arrow:active{ transform: translateY(1px); }

.btn-arrow__icon{
  width: 14px;
  height: 14px;
  display: block;
  fill: currentColor;
}