please-pay-me/mobile/lib/theme/tokens.dart

/// Design tokens for the iOS-styled kit.
///
/// Semantic colors follow Apple HIG (label / separator / grouped background)
/// and are declared as [CupertinoDynamicColor] so widgets resolve light & dark
/// automatically. Brand tint stays green to match the web cabinet.
library;

import 'package:flutter/cupertino.dart';

abstract final class AppColors {
  /// Brand tint — replaces `systemBlue` across the kit.
  static const accent = CupertinoDynamicColor.withBrightness(
    color: Color(0xFF12885A),
    darkColor: Color(0xFF3CD68C),
  );

  static const accentSoft = CupertinoDynamicColor.withBrightness(
    color: Color(0xFFE4F4EC),
    darkColor: Color(0xFF14301F),
  );

  // —— iOS system palette ——
  static const systemRed = CupertinoDynamicColor.withBrightness(
    color: Color(0xFFFF3B30),
    darkColor: Color(0xFFFF453A),
  );
  static const systemOrange = CupertinoDynamicColor.withBrightness(
    color: Color(0xFFFF9500),
    darkColor: Color(0xFFFF9F0A),
  );
  static const systemGreen = CupertinoDynamicColor.withBrightness(
    color: Color(0xFF34C759),
    darkColor: Color(0xFF30D158),
  );
  static const systemGray = CupertinoDynamicColor.withBrightness(
    color: Color(0xFF8E8E93),
    darkColor: Color(0xFF8E8E93),
  );
  static const systemGray3 = CupertinoDynamicColor.withBrightness(
    color: Color(0xFFC7C7CC),
    darkColor: Color(0xFF48484A),
  );
  static const systemGray5 = CupertinoDynamicColor.withBrightness(
    color: Color(0xFFE5E5EA),
    darkColor: Color(0xFF2C2C2E),
  );
  static const systemGray6 = CupertinoDynamicColor.withBrightness(
    color: Color(0xFFF2F2F7),
    darkColor: Color(0xFF1C1C1E),
  );

  // —— Text hierarchy ——
  static const label = CupertinoDynamicColor.withBrightness(
    color: Color(0xFF000000),
    darkColor: Color(0xFFFFFFFF),
  );
  static const secondaryLabel = CupertinoDynamicColor.withBrightness(
    color: Color(0x993C3C43),
    darkColor: Color(0x99EBEBF5),
  );
  static const tertiaryLabel = CupertinoDynamicColor.withBrightness(
    color: Color(0x4D3C3C43),
    darkColor: Color(0x4DEBEBF5),
  );

  // —— Separators & surfaces ——
  static const separator = CupertinoDynamicColor.withBrightness(
    color: Color(0x4A3C3C43),
    darkColor: Color(0xA6545458),
  );
  static const opaqueSeparator = CupertinoDynamicColor.withBrightness(
    color: Color(0xFFC6C6C8),
    darkColor: Color(0xFF38383A),
  );
  static const groupedBackground = CupertinoDynamicColor.withBrightness(
    color: Color(0xFFF2F2F7),
    darkColor: Color(0xFF000000),
  );
  static const groupedSurface = CupertinoDynamicColor.withBrightness(
    color: Color(0xFFFFFFFF),
    darkColor: Color(0xFF1C1C1E),
  );
  static const barBackground = CupertinoDynamicColor.withBrightness(
    color: Color(0xF0F9F9F9),
    darkColor: Color(0xF01D1D1D),
  );

  static Color of(BuildContext context, Color color) =>
      CupertinoDynamicColor.resolve(color, context);
}

/// 4pt grid; iOS content inset is 16.
abstract final class AppSpacing {
  static const double s1 = 4;
  static const double s2 = 8;
  static const double s3 = 12;
  static const double s4 = 16;
  static const double s5 = 20;
  static const double s6 = 28;
  static const double s7 = 40;
  static const double s8 = 56;

  /// Standard leading/trailing inset for grouped content.
  static const double gutter = 16;
}

abstract final class AppRadii {
  static const double sm = 6;
  static const double md = 10;

  /// Inset-grouped cards & large buttons.
  static const double lg = 12;
  static const double xl = 16;
  static const double capsule = 999;
}

abstract final class AppSizes {
  static const double buttonLarge = 50;
  static const double buttonMedium = 44;
  static const double buttonSmall = 34;
  static const double rowMinHeight = 44;
  static const double hairline = 0.5;
}

/// SF Pro text scale (Apple HIG).
abstract final class AppTypography {
  static const largeTitle = TextStyle(fontSize: 34, height: 1.2, fontWeight: FontWeight.w700, letterSpacing: 0.37);
  static const title1 = TextStyle(fontSize: 28, height: 1.2, fontWeight: FontWeight.w700, letterSpacing: 0.36);
  static const title2 = TextStyle(fontSize: 22, height: 1.25, fontWeight: FontWeight.w700, letterSpacing: 0.35);
  static const title3 = TextStyle(fontSize: 20, height: 1.25, fontWeight: FontWeight.w600, letterSpacing: 0.38);
  static const headline = TextStyle(fontSize: 17, height: 1.3, fontWeight: FontWeight.w600, letterSpacing: -0.41);
  static const body = TextStyle(fontSize: 17, height: 1.3, fontWeight: FontWeight.w400, letterSpacing: -0.41);
  static const callout = TextStyle(fontSize: 16, height: 1.3, fontWeight: FontWeight.w400, letterSpacing: -0.32);
  static const subhead = TextStyle(fontSize: 15, height: 1.3, fontWeight: FontWeight.w400, letterSpacing: -0.24);
  static const footnote = TextStyle(fontSize: 13, height: 1.3, fontWeight: FontWeight.w400, letterSpacing: -0.08);
  static const caption1 = TextStyle(fontSize: 12, height: 1.3, fontWeight: FontWeight.w400);
  static const caption2 = TextStyle(fontSize: 11, height: 1.3, fontWeight: FontWeight.w400, letterSpacing: 0.07);
}