/* =========================================================
 * EZO mobile — Colors & Type
 * Source of truth: apps/mobile/src/global.css (Tailwind v4 @theme)
 * ========================================================= */

:root {
  /* ----- Primitive: Green (primary brand) ----- */
  --color-green-100: #eaf2f0;
  --color-green-200: #cde0dc;
  --color-green-300: #accbc5;
  --color-green-400: #8ab5ad;
  --color-green-500: #699e94;
  --color-green-600: #4d877c;
  --color-green-700: #3d7066;
  --color-green-800: #2e5c55;
  --color-green-900: #1f423d;

  /* ----- Primitive: Brown (secondary) ----- */
  --color-brown-100: #f2eeeb;
  --color-brown-200: #e0d6d1;
  --color-brown-300: #ccbbb4;
  --color-brown-400: #b8a096;
  --color-brown-500: #8c705f;
  --color-brown-600: #755b4d;
  --color-brown-700: #5e483c;
  --color-brown-800: #47352c;
  --color-brown-900: #30231d;

  /* ----- Primitive: Cream (neutral, warm) ----- */
  --color-cream-100: #f5f5f0;
  --color-cream-200: #e6e6e1;
  --color-cream-300: #d6d6d1;
  --color-cream-400: #c4c4bf;
  --color-cream-500: #b0b0ab;
  --color-cream-600: #8f8f8a;
  --color-cream-700: #6e6e6a;
  --color-cream-800: #4f4f4c;
  --color-cream-900: #2e2e2c;

  /* ----- Semantic ----- */
  --color-primary: #4d877c;
  --color-primary-light: #8ab5ad;
  --color-primary-dark: #2e5c55;
  --color-on-primary: #ffffff;

  --color-secondary: #755b4d;
  --color-secondary-light: #b8a096;
  --color-secondary-dark: #47352c;
  --color-on-secondary: #ffffff;

  --color-surface: #f5f5f0;        /* warm off-white */
  --color-on-surface: #000000;
  --color-surface-raised: #ffffff; /* cards on surface */

  /* ----- Status (Tailwind utility classes used in app) ----- */
  --color-success-bg: #ecfdf5;     /* emerald-50 */
  --color-success-fg: #166534;     /* emerald-800 */
  --color-warning-bg: #fef9c3;     /* yellow-100 */
  --color-warning-fg: #854d0e;     /* yellow-800 */
  --color-info-bg: #eff6ff;        /* blue-50 */
  --color-info-fg: #1e3a8a;        /* blue-900 */
  --color-error-bg: #fef2f2;       /* red-50 */
  --color-error-fg: #991b1b;       /* red-800 */

  /* ----- Typography ----- */
  /* Native app inherits the platform system font (San Francisco on iOS,
     Roboto on Android). For web previews of the design system we mirror
     that with the system stack. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Type scale derived from in-app Tailwind usage
     (text-3xl headlines, text-2xl card values, text-lg section titles,
      text-base body, text-sm secondary, text-xs caption) */
  --text-display: 30px;     /* text-3xl — page titles ("Store", "Settings") */
  --text-display-lh: 36px;
  --text-h1: 24px;          /* text-2xl — card hero values, plan names */
  --text-h1-lh: 32px;
  --text-h2: 20px;          /* text-xl — checkout title */
  --text-h2-lh: 28px;
  --text-h3: 18px;          /* text-lg — section labels */
  --text-h3-lh: 28px;
  --text-body: 16px;        /* text-base */
  --text-body-lh: 24px;
  --text-small: 14px;       /* text-sm — captions, hints */
  --text-small-lh: 20px;
  --text-caption: 12px;     /* text-xs — pill labels, metadata */
  --text-caption-lh: 16px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* ----- Radius (in-app uses rounded-md/lg/xl/2xl/3xl/full) ----- */
  --radius-sm: 6px;     /* rounded-md */
  --radius-md: 8px;     /* rounded-lg */
  --radius-lg: 12px;    /* rounded-xl — buttons, inputs */
  --radius-xl: 16px;    /* rounded-2xl — cards */
  --radius-2xl: 24px;   /* rounded-3xl — hero contract card */
  --radius-pill: 9999px;

  /* ----- Spacing (4-pt scale, app uses p-4/5/6, mx-4 most often) ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ----- Shadow (Tailwind shadow-sm / shadow-md / shadow-lg / shadow-2xl) ----- */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* =========================================================
 * Semantic element styles
 * ========================================================= */
html, body {
  font-family: var(--font-sans);
  color: var(--color-on-surface);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1-display {
  font-size: var(--text-display);
  line-height: var(--text-display-lh);
  font-weight: var(--weight-bold);
  color: var(--color-primary-dark);
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-size: var(--text-h1);
  line-height: var(--text-h1-lh);
  font-weight: var(--weight-bold);
  color: #111827; /* gray-900 — used for plan names, hero values */
}
h3, .h3 {
  font-size: var(--text-h3);
  line-height: var(--text-h3-lh);
  font-weight: var(--weight-bold);
  color: #1f2937; /* gray-800 */
}
p, .body {
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  font-weight: var(--weight-regular);
  color: #374151; /* gray-700 */
}
.small {
  font-size: var(--text-small);
  line-height: var(--text-small-lh);
  color: #6b7280; /* gray-500 — secondary text everywhere */
}
.caption {
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: #6b7280;
}
.eyebrow {
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
}
code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}