/* ==========================================================================
   apway · Foundations
   Colors, type, spacing, motion — the atomic layer.
   ========================================================================== */

/* Type by Indian Type Foundry — Rozha One (regal Devanagari-heritage
   display) + Mukta (humanist sans, Devanagari + Latin). JetBrains Mono
   kept for the machine's technical data readouts. */
@import url('https://fonts.googleapis.com/css2?family=Rozha+One&family=Mukta:wght@300;400;500;600;700;800&family=Archivo:ital,wght@0,800;0,900;1,800;1,900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* --------------------------------------------------------------------
     COLOR · the palette
     Black dominates. White is the stage. Orange is the silver lining —
     use it for <= 10% of any composition.
     -------------------------------------------------------------------- */

  /* Core — Ivory & Indigo
     Ivory is the stage. Indigo is the ink. Marigold is the silver lining —
     use it for <= 10% of any composition. */
  --jet-black:     #11152B;   /* deep indigo, the darkest ink */
  --racing-orange: #E08A2B;   /* marigold — the accent */
  --pure-white:    #FFFFFF;

  /* Indigo ink scale — warm-cool neutrals that read on ivory */
  --ink-950: #11152B;
  --ink-900: #161B35;
  --ink-800: #1E2A4A;   /* primary indigo */
  --ink-700: #2C3656;
  --ink-600: #3C476A;
  --ink-500: #4E587A;
  --ink-400: #565C73;   /* tertiary text on ivory */
  --ink-300: #6F7590;   /* secondary text on ivory */
  --ink-200: #AEB2C4;
  --ink-100: #D8D0C0;
  --ink-050: #EFE9DC;

  /* Marigold — the accent, narrow range */
  --orange-600: #C9741C;
  --orange-500: #E08A2B;  /* brand */
  --orange-400: #ECA13F;
  --orange-300: #F0B968;  /* use sparingly */
  --orange-glow: rgba(224, 138, 43, 0.28);

  /* Indian-touch supports */
  --indigo:      #1E2A4A;
  --indigo-soft: #2E3A66;

  /* Ivory canvas scale (handmade-paper warmth) */
  --ivory-0: #F7F3EA;   /* primary canvas */
  --ivory-1: #FBF8F1;   /* elevated */
  --ivory-2: #FFFFFF;   /* card */
  --ivory-3: #EFE7D6;   /* higher / bands */
  --taupe-line: #E4DAC8;

  /* Semantic — foreground (on ivory) */
  --fg-1: var(--indigo);         /* primary */
  --fg-2: var(--ink-300);        /* secondary */
  --fg-3: var(--ink-400);        /* tertiary */
  --fg-accent: var(--racing-orange);

  /* Semantic — foreground (on dark indigo panels) */
  --fg-1-invert: #F2ECDD;
  --fg-2-invert: #C9CEDF;
  --fg-3-invert: #9AA0C0;

  /* Semantic — background */
  --bg-1: var(--ivory-0);        /* primary canvas */
  --bg-2: var(--ivory-1);        /* elevated surface */
  --bg-3: var(--ivory-3);        /* higher surface / bands */
  --bg-line: var(--taupe-line);  /* hairlines, borders */
  --bg-invert: var(--indigo);

  /* --------------------------------------------------------------------
     GLASS — iOS / macOS frosted "liquid glass" surfaces
     Translucent fill + heavy blur + saturation, a bright top hairline,
     and a soft ambient drop. Needs the ambient wash behind to shimmer.
     -------------------------------------------------------------------- */
  --glass-blur: blur(30px) saturate(200%);
  --glass-blur-strong: blur(42px) saturate(210%);
  --glass-bg: rgba(255, 255, 255, 0.3);
  --glass-bg-strong: rgba(255, 255, 255, 0.45);
  --glass-tint: rgba(247, 243, 234, 0.42);
  --glass-border: rgba(30, 42, 74, 0.12);
  --glass-edge: rgba(30, 42, 74, 0.1);
  /* soft top sheen only — no full white ring around the element */
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  --glass-shadow: 0 10px 30px rgba(30, 42, 74, 0.12);
  --glass-shadow-lg: 0 24px 56px rgba(30, 42, 74, 0.16);
  /* diagonal specular sheen layered over the translucent fill */
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.14) 30%, rgba(255, 255, 255, 0) 55%);
  --glass-accent: rgba(224, 138, 43, 0.16);

  /* Subtle jaali (lattice) motif — overlapping-arch net */
  --jaali: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20width%3D%2744%27%20height%3D%2744%27%20viewBox%3D%270%200%2044%2044%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%231E2A4A%27%20stroke-width%3D%271%27%3E%3Ccircle%20cx%3D%270%27%20cy%3D%2722%27%20r%3D%2722%27/%3E%3Ccircle%20cx%3D%2744%27%20cy%3D%2722%27%20r%3D%2722%27/%3E%3Ccircle%20cx%3D%2722%27%20cy%3D%270%27%20r%3D%2722%27/%3E%3Ccircle%20cx%3D%2722%27%20cy%3D%2744%27%20r%3D%2722%27/%3E%3C/g%3E%3C/svg%3E");

  /* Semantic — status (kept quiet, brand-aligned) */
  --status-go:     #6BE06B;
  --status-warn:   #FFB800;
  --status-stop:   var(--racing-orange);

  /* --------------------------------------------------------------------
     TYPE
     Archivo (display, racing-italic when slanted)
     Geist (body)
     JetBrains Mono (data / timings / code)
     -------------------------------------------------------------------- */

  --font-display: 'Rozha One', 'Georgia', serif;        /* regal serif — big headings */
  --font-wordmark: 'Archivo', system-ui, sans-serif;    /* the APWAY logo wordmark */
  --font-display-condensed: 'Mukta', system-ui, sans-serif;
  --font-ui: 'Mukta', system-ui, -apple-system, sans-serif; /* labels, eyebrows, buttons */
  --font-body: 'Mukta', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale — modular, 1.25 (major third) */
  --text-3xs: 10px;
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 84px;
  --text-7xl: 112px;
  --text-8xl: 144px;

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

  /* Leading */
  --leading-tight: 1.02;
  --leading-snug:  1.15;
  --leading-normal: 1.45;
  --leading-loose: 1.7;

  /* Tracking */
  --track-tighter: -0.04em;
  --track-tight:   -0.02em;
  --track-normal:  0em;
  --track-wide:    0.04em;
  --track-wider:   0.1em;
  --track-widest:  0.18em; /* for ALL CAPS labels */

  /* --------------------------------------------------------------------
     SPACE — 4px base
     -------------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* --------------------------------------------------------------------
     RADIUS — mostly sharp. A snail is slippery, an F1 chassis is sharp.
     -------------------------------------------------------------------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  /* --------------------------------------------------------------------
     ELEVATION — quiet. Speed doesn't float; it streaks.
     -------------------------------------------------------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(30,42,74,0.08);
  --shadow-2: 0 12px 32px rgba(30,42,74,0.10);
  --shadow-glow: 0 0 0 1px var(--racing-orange), 0 0 24px var(--orange-glow);
  --shadow-hairline-top: inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-hairline-bot: inset 0 -1px 0 rgba(30,42,74,0.06);

  /* --------------------------------------------------------------------
     MOTION — fast, linear-ish. Confidence, not bounce.
     -------------------------------------------------------------------- */
  --ease-drive:     cubic-bezier(0.2, 0.8, 0.2, 1);       /* default */
  --ease-launch:    cubic-bezier(0.7, 0, 0.84, 0);        /* accel in */
  --ease-coast:     cubic-bezier(0.16, 1, 0.3, 1);        /* decel out */
  --ease-linear:    linear;

  /* Pick-&-place motion character */
  --ease-gantry: cubic-bezier(0.65, 0, 0.35, 1);          /* axis travel: accel → decel */
  --ease-settle: cubic-bezier(0.22, 1.18, 0.36, 1);       /* servo settle, tiny overshoot */
  --ease-place:  cubic-bezier(0.16, 1, 0.3, 1);           /* decelerate into placement */

  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
  --dur-pick:    220ms;
  --dur-travel:  360ms;
  --dur-place:   560ms;

  /* --------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------- */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1280px;
  --container-xl: 1440px;
  --hairline: 1px solid var(--bg-line);
}

/* ==========================================================================
   Semantic element defaults
   ========================================================================== */

.apw-display-1,
.apw-h-hero {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(56px, 9vw, var(--text-8xl));
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
}

.apw-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-6xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
}

.apw-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-4xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
}

.apw-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-tight);
}

.apw-eyebrow,
.apw-label {
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  color: var(--fg-2);
}

.apw-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

.apw-body-lg {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.apw-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

.apw-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
}

/* Helpful utility: the regal serif wordmark-style text */
.apw-display-caps {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}