/* ============================================================
   Papaya App Store — Colors & Type
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&family=Roboto+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand core (provided) ---------- */
  --papaya-forest:  #2d6a4f;  /* primary — growth, trust */
  --papaya-indigo:  #2c4577;  /* secondary — depth, links */
  --papaya-ink:     #181816;  /* near-black — text, surfaces */

  /* ---------- Brand accent (papaya-derived) ---------- */
  --papaya-flesh:   #ff7a45;  /* papaya orange — CTAs, highlight */
  --papaya-seed:    #2b1a14;  /* dark seed brown */
  --papaya-pulp:    #ffb088;  /* light flesh — soft surfaces */

  /* ---------- Tech accents ---------- */
  --signal-cyan:    #4dd6e0;  /* tech accent — data, code */
  --signal-lime:    #c8f04d;  /* tech accent — status, highlights */
  --grid-line:      rgba(24, 24, 22, 0.06);
  --grid-line-strong: rgba(24, 24, 22, 0.12);

  /* ---------- Forest scale ---------- */
  --forest-50:  #ecf5f0;
  --forest-100: #d4eade;
  --forest-200: #a9d3bd;
  --forest-300: #7ebd9c;
  --forest-400: #54a77b;
  --forest-500: #2d6a4f;  /* base */
  --forest-600: #245540;
  --forest-700: #1c4030;
  --forest-800: #132c20;
  --forest-900: #0b1810;

  /* ---------- Indigo scale ---------- */
  --indigo-50:  #eceff5;
  --indigo-100: #d0d8e7;
  --indigo-200: #a1b1ce;
  --indigo-300: #728ab6;
  --indigo-400: #46639a;
  --indigo-500: #2c4577;
  --indigo-600: #233760;
  --indigo-700: #1b2a49;
  --indigo-800: #121d33;
  --indigo-900: #0a111d;

  /* ---------- Neutral / ink scale ---------- */
  --ink-50:  #f7f7f6;
  --ink-100: #ececea;
  --ink-200: #d6d6d2;
  --ink-300: #b4b4ae;
  --ink-400: #898984;
  --ink-500: #5e5e5a;
  --ink-600: #3e3e3b;
  --ink-700: #2a2a28;
  --ink-800: #1f1f1d;
  --ink-900: #181816;  /* base */

  /* ---------- Semantic surfaces ---------- */
  --bg-page:      var(--ink-50);
  --bg-surface:   #ffffff;
  --bg-raised:    #ffffff;
  --bg-sunken:    var(--ink-100);
  --bg-inverse:   var(--ink-900);

  /* ---------- Semantic foreground ---------- */
  --fg-1: var(--ink-900);    /* primary text */
  --fg-2: var(--ink-600);    /* secondary text */
  --fg-3: var(--ink-400);    /* tertiary / placeholder */
  --fg-on-dark: #ffffff;
  --fg-on-brand: #ffffff;
  --fg-link: var(--indigo-500);

  /* ---------- Semantic borders ---------- */
  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);

  /* ---------- Status ---------- */
  --status-success: #2d6a4f;
  --status-success-bg: #e6f1eb;
  --status-warning: #b8730a;
  --status-warning-bg: #fbeed5;
  --status-danger:  #b3261e;
  --status-danger-bg:  #fbe5e3;
  --status-info:    var(--indigo-500);
  --status-info-bg: var(--indigo-50);

  /* ---------- Type scale (Roboto) ---------- */
  --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* sizes */
  --fs-display: 56px;
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-micro: 11px;

  /* line-heights */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  /* weights — Roboto offers 300/400/500/700/900 */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* letter-spacing */
  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-normal: 0;
  --ls-wide:  0.04em;
  --ls-allcaps: 0.08em;

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Radii (tighter, more architectural) ---------- */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- Background grid pattern ---------- */
  --bg-grid: linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/24px 24px,
             linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/24px 24px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(24, 24, 22, 0.06);
  --shadow-sm: 0 1px 3px rgba(24, 24, 22, 0.08), 0 1px 2px rgba(24, 24, 22, 0.04);
  --shadow-md: 0 4px 12px rgba(24, 24, 22, 0.08), 0 2px 4px rgba(24, 24, 22, 0.04);
  --shadow-lg: 0 12px 28px rgba(24, 24, 22, 0.12), 0 4px 8px rgba(24, 24, 22, 0.06);
  --shadow-xl: 0 24px 48px rgba(24, 24, 22, 0.16), 0 8px 16px rgba(24, 24, 22, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-focus: 0 0 0 3px rgba(44, 69, 119, 0.28);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --ease-spring: cubic-bezier(0.5, 1.5, 0.4, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-slower: 480ms;
}

/* ============================================================
   Semantic type roles
   ============================================================ */

.t-display {
  font: var(--fw-black) var(--fs-display)/var(--lh-tight) var(--font-sans);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.t-h1 {
  font: var(--fw-bold) var(--fs-h1)/var(--lh-tight) var(--font-sans);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.t-h2 {
  font: var(--fw-bold) var(--fs-h2)/var(--lh-snug) var(--font-sans);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}
.t-h3 {
  font: var(--fw-medium) var(--fs-h3)/var(--lh-snug) var(--font-sans);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
}
.t-h4 {
  font: var(--fw-medium) var(--fs-h4)/var(--lh-snug) var(--font-sans);
  color: var(--fg-1);
}
.t-body {
  font: var(--fw-regular) var(--fs-body)/var(--lh-base) var(--font-sans);
  color: var(--fg-1);
}
.t-body-strong {
  font: var(--fw-medium) var(--fs-body)/var(--lh-base) var(--font-sans);
  color: var(--fg-1);
}
.t-small {
  font: var(--fw-regular) var(--fs-small)/var(--lh-base) var(--font-sans);
  color: var(--fg-2);
}
.t-micro {
  font: var(--fw-medium) var(--fs-micro)/var(--lh-base) var(--font-sans);
  letter-spacing: var(--ls-allcaps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.t-mono {
  font: var(--fw-regular) var(--fs-small)/var(--lh-base) var(--font-mono);
}
.t-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.t-link:hover {
  border-bottom-color: currentColor;
}

/* element resets */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}