/*
 * Off Grid design tokens as CSS custom properties.
 * Source of truth: src/index.ts (mirrors the mobile RN tokens).
 *
 * Dark is the default theme (the design guide treats pure-black dark mode as
 * primary). Light mode applies when the document or any ancestor sets
 * data-theme="light" (or the .light class).
 *
 * Two forms per color:
 *   --og-<name>      full color (e.g. #34d399) for direct CSS use.
 *   --og-rgb-<name>  space-separated RGB channels (e.g. 52 211 153) so
 *                    Tailwind opacity modifiers work via
 *                    rgb(var(--og-rgb-<name>) / <alpha-value>).
 *
 * Variables are prefixed --og-* to avoid colliding with framework variables.
 */

:root,
[data-theme='dark'],
.dark {
  /* Accent */
  --og-primary: #34d399;
  --og-rgb-primary: 52 211 153;
  --og-primary-dark: #10b981;
  --og-rgb-primary-dark: 16 185 129;
  --og-primary-light: #6ee7b7;
  --og-rgb-primary-light: 110 231 183;

  /* Surfaces */
  --og-background: #0a0a0a;
  --og-rgb-background: 10 10 10;
  --og-surface: #141414;
  --og-rgb-surface: 20 20 20;
  --og-surface-light: #1e1e1e;
  --og-rgb-surface-light: 30 30 30;
  --og-surface-hover: #252525;
  --og-rgb-surface-hover: 37 37 37;

  /* Text */
  --og-text: #ffffff;
  --og-rgb-text: 255 255 255;
  --og-text-secondary: #b0b0b0;
  --og-rgb-text-secondary: 176 176 176;
  --og-text-muted: #808080;
  --og-rgb-text-muted: 128 128 128;
  --og-text-disabled: #4a4a4a;
  --og-rgb-text-disabled: 74 74 74;

  /* Borders */
  --og-border: #1e1e1e;
  --og-rgb-border: 30 30 30;
  --og-border-light: #2a2a2a;
  --og-rgb-border-light: 42 42 42;
  --og-border-focus: #34d399;
  --og-rgb-border-focus: 52 211 153;

  /* Semantic */
  --og-success: #b0b0b0;
  --og-rgb-success: 176 176 176;
  --og-warning: #ffffff;
  --og-rgb-warning: 255 255 255;
  /*
   * Muted brick, not a warning-light red. The rest of this palette is deliberately
   * desaturated (success and info are greys), so a saturated red is the one thing that
   * shouts - and destructive actions are the last place the UI should shout. Luminance
   * matches the neutral semantics; only the hue distinguishes it.
   */
  --og-error: #b06a6a;
  --og-rgb-error: 176 106 106;
  --og-trending: #f59e0b;
  --og-rgb-trending: 245 158 11;
  --og-info: #b0b0b0;
  --og-rgb-info: 176 176 176;

  /* Special */
  --og-overlay: rgba(0, 0, 0, 0.7);
  --og-divider: #1a1a1a;
}

[data-theme='light'],
.light {
  --og-primary: #059669;
  --og-rgb-primary: 5 150 105;
  --og-primary-dark: #047857;
  --og-rgb-primary-dark: 4 120 87;
  --og-primary-light: #34d399;
  --og-rgb-primary-light: 52 211 153;

  --og-background: #ffffff;
  --og-rgb-background: 255 255 255;
  --og-surface: #f5f5f5;
  --og-rgb-surface: 245 245 245;
  --og-surface-light: #ebebeb;
  --og-rgb-surface-light: 235 235 235;
  --og-surface-hover: #e0e0e0;
  --og-rgb-surface-hover: 224 224 224;

  --og-text: #0a0a0a;
  --og-rgb-text: 10 10 10;
  --og-text-secondary: #525252;
  --og-rgb-text-secondary: 82 82 82;
  --og-text-muted: #8a8a8a;
  --og-rgb-text-muted: 138 138 138;
  --og-text-disabled: #bfbfbf;
  --og-rgb-text-disabled: 191 191 191;

  --og-border: #e5e5e5;
  --og-rgb-border: 229 229 229;
  --og-border-light: #d4d4d4;
  --og-rgb-border-light: 212 212 212;
  --og-border-focus: #059669;
  --og-rgb-border-focus: 5 150 105;

  --og-success: #525252;
  --og-rgb-success: 82 82 82;
  --og-warning: #0a0a0a;
  --og-rgb-warning: 10 10 10;
  /* Muted brick for light mode: dark enough to read on white, never a warning light. */
  --og-error: #8a4a4a;
  --og-rgb-error: 138 74 74;
  --og-trending: #d97706;
  --og-rgb-trending: 217 119 6;
  --og-info: #525252;
  --og-rgb-info: 82 82 82;

  --og-overlay: rgba(0, 0, 0, 0.4);
  --og-divider: #ebebeb;
}

/* Theme-independent tokens */
:root {
  --og-font-mono: 'Menlo', ui-monospace, SFMono-Regular, 'SF Mono', Consolas,
    'Liberation Mono', monospace;

  --og-radius-sm: 2px;
  --og-radius-md: 8px;

  --og-space-xs: 4px;
  --og-space-sm: 8px;
  --og-space-md: 12px;
  --og-space-lg: 16px;
  --og-space-xl: 24px;
  --og-space-xxl: 32px;

  /* Type scale (font-size / weight / letter-spacing) */
  --og-type-display-size: 22px;
  --og-type-display-weight: 200;
  --og-type-h1-size: 24px;
  --og-type-h1-weight: 300;
  --og-type-h2-size: 16px;
  --og-type-h2-weight: 400;
  --og-type-h3-size: 13px;
  --og-type-h3-weight: 400;
  --og-type-body-size: 14px;
  --og-type-body-weight: 400;
  --og-type-label-size: 10px;
  --og-type-label-weight: 400;
  --og-type-meta-size: 10px;
  --og-type-meta-weight: 300;
}