// ─── Design Tokens ───────────────────────────────────────────────────
// Single source of truth for all design values.
// Changing a value here should update the entire site.
// CSS custom properties in globals.css mirror these for Tailwind usage.
// ─────────────────────────────────────────────────────────────────────

/** Color palette — use Tailwind classes (e.g. `bg-tenext-dark`) when possible */
export const colors = {
  // Backgrounds
  bgDark: "#1F1F1F",
  bgCardDark: "#282828",
  bgCardBorder: "#3F3F3F",
  bgWhite: "#FFFFFF",

  // Accent
  accentTeal: "#45D0BD",
  accentBlue: "#44B6E9",
  accentRed: "#EF6464",
  accentRedHover: "#F57E7E",

  // Purple palette
  purpleStart: "#8258C8",
  purpleMid: "#6766C8",
  purpleEnd: "#2C84C8",
  cardPurple: "#343F78",
  cardPurple2: "#56619E",
  cardLavender: "#AC8DE0",

  // Text
  textMuted: "#87899B",
  textWhite: "#FFFFFF",
  textDark: "#1F1F1F",

  // Surfaces
  surfaceMuted: "#ECF0F4",
} as const;

/** Spacing tokens — predefined values only, no arbitrary px */
export const spacing = {
  /** Vertical padding for page sections */
  sectionPaddingY: {
    sm: "60px",
    md: "80px",
    lg: "100px",
    xl: "120px",
  },
  /** Horizontal page gutter */
  pageGutter: "20px",
  /** Max width for boxed containers */
  containerMaxWidth: "1260px",
  /** Container inner padding */
  containerPaddingX: "15px",
  /** Gap between cards in grids */
  cardGap: "20px",
  /** Gap between components within a section */
  componentGap: {
    sm: "30px",
    md: "40px",
    lg: "50px",
  },
} as const;

/** Border radius tokens */
export const borderRadius = {
  card: "25px",
  button: "25px",
  buttonPill: "9999px",
  tag: "15px",
  navbar: "10px",
  section: "25px",
} as const;

/** Typography scale */
export const typography = {
  hero: {
    size: "clamp(38px, 5.9vw, 100px)",
    weight: 700,
    lineHeight: 1.1,
    letterSpacing: "-0.03em",
  },
  sectionTitle: {
    size: "clamp(32px, 4vw, 56px)",
    weight: 500,
    lineHeight: 1.1,
    letterSpacing: "-0.03em",
  },
  cardTitle: {
    size: "30px",
    weight: 500,
    lineHeight: "1.16666em",
    letterSpacing: "-0.03em",
  },
  body: {
    size: "16px",
    weight: 400,
    lineHeight: 1.6,
  },
  small: {
    size: "14px",
    weight: 500,
    lineHeight: 1,
  },
  tag: {
    size: "12px",
    weight: 600,
    lineHeight: 1,
    letterSpacing: "0.1em",
    textTransform: "uppercase" as const,
  },
} as const;

/** Shadow tokens */
export const shadows = {
  cardHover:
    "0 22px 55px rgba(31, 31, 31, 0.16), 0 0 0 1px rgba(69, 208, 189, 0.22)",
  buttonHover: "0 15px 30px rgba(239, 100, 100, 0.28)",
  scrollBtn: "0 12px 30px rgba(0, 0, 0, 0.14)",
} as const;

/** Animation presets */
export const animations = {
  /** Reveal-on-scroll */
  revealDuration: "0.72s",
  revealEase: "cubic-bezier(0.22, 1, 0.36, 1)",
  /** Card / button hover */
  hoverDuration: "0.32s",
  hoverEase: "ease",
  hoverLift: "-4px",
} as const;