@layer tokens, base, utilities;

/* TOKENS (design variables) */
@layer tokens {
  :root {
    /* Background scale */
    --color-bg-300: #d7e0e9;
    --color-bg-400: #f1f5f9; /* base */
    --color-bg-500: #aab7c5;

    /* Primary scale */
    --color-primary-400: #32cfcf;
    --color-primary-500: #0ea5a4; /* base */
    --color-primary-600: #0b8f8e;

    /* Card scale */
    --color-card-200: #f6f9fc;
    --color-card-300: #f1f5f9; /* base */
    --color-card-400: #e4eaf0;

    /* Heading scale */
    --color-heading-400: #6f8099;
    --color-heading-500: #1a2330; /* base */
    --color-heading-600: #141c26;

    /* Text scale */
    --color-text-300: #888888;
    --color-text-400: #7d90a6;
    --color-text-500: #1d2633; /* base */
    --color-text-600: #161d28;

    /* Core Colors */
    --color-bg: var(--color-bg-400);
    --color-card: var(--color-card-300);
    --color-primary: var(--color-primary-500);
    --color-heading: var(--color-heading-500);
    --color-text: var(--color-text-500);
    --color-text-app: var(--color-text-300);

    /* Neutrals and surfaces */
    --color-white: #ffffff;
    --color-border: #00000014;

    /* Semantic roles */
    --background: var(--color-bg);
    --foreground: var(--color-text);
    --border: var(--color-border);
    --input: var(--color-white);

    --primary: var(--color-primary);
    --primary-foreground: var(--color-white);

    --secondary: var(--color-card);
    --secondary-foreground: var(--color-heading);

    --muted: #f8fafc;
    --muted-foreground: #94a3b8;

    --success: #ecfdf5;
    --success-foreground: #065f46;

    --accent: var(--color-primary);
    --accent-foreground: var(--color-white);

    --destructive: #fef2f2;
    --destructive-foreground: #991b1b;

    --warning: #fff7ed;
    --warning-foreground: #92400e;

    --card: var(--color-card);
    --card-foreground: var(--color-text);

    --sidebar: #f8fafc;
    --sidebar-foreground: var(--color-text);
    --sidebar-primary: #e6fffe;
    --sidebar-primary-foreground: #055e5b;

    /* Typography scale */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-9: 2.5rem;
    --space-10: 6rem;

    /* Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 1.5rem;

    /* Font family */
    --font-raleway:
      "Raleway", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, sans-serif;

    --font-weight-light: 300;
    --font-weight-bold: 700;

    --font-family-body: var(--font-raleway);
  }
}

/* BASE (resets and global defaults) */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-base);
    background: var(--background);
    color: var(--foreground);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
  }

  a {
    color: var(--color-text-600);
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
    cursor: pointer;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  button {
    border: none;
    outline: none;
  }
  button:hover {
    cursor: pointer;
  }
}

/* UTILITIES */
@layer utilities {
  /* Text + surfaces */
  .text-heading {
    color: var(--color-heading);
  }

  .text-body {
    color: var(--color-text);
  }

  .bg-page {
    background: var(--background);
  }

  .bg-card {
    background: var(--card);
  }

  .border {
    border: 1px solid var(--border);
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  /* Layout container */
  .container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-4);

    @media (min-width: 768px) {
      padding-inline: var(--space-6);
    }

    @media (min-width: 1024px) {
      padding-inline: var(--space-8);
    }
  }

  /* Padding utilities */
  .p-1 {
    padding: var(--space-1);
  }

  .p-2 {
    padding: var(--space-2);
  }

  .p-3 {
    padding: var(--space-3);
  }

  .p-4 {
    padding: var(--space-4);
  }

  .p-5 {
    padding: var(--space-5);
  }

  .p-6 {
    padding: var(--space-6);
  }

  .p-8 {
    padding: var(--space-8);
  }

  .px-1 {
    padding-inline: var(--space-1);
  }
  .px-2 {
    padding-inline: var(--space-2);
  }

  .px-3 {
    padding-inline: var(--space-3);
  }

  .px-4 {
    padding-inline: var(--space-4);
  }

  .px-5 {
    padding-inline: var(--space-5);
  }

  .px-6 {
    padding-inline: var(--space-6);
  }

  .px-8 {
    padding-inline: var(--space-8);
  }

  .py-4 {
    padding-block: var(--space-4);
  }

  .py-6 {
    padding-block: var(--space-6);
  }

  .py-8 {
    padding-block: var(--space-8);
  }

  /* Flex utilities */
  .flex {
    display: flex;
  }

  .inline-flex {
    display: inline-flex;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-row-rev {
    flex-direction: row-reverse;
  }

  .flex-col {
    flex-direction: column;
  }

  .items-center {
    align-items: center;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-end {
    align-items: flex-end;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-end {
    justify-content: flex-end;
  }

  /* Grid utilities */
  .grid {
    display: grid;
  }

  .grid-cols-1 {
    grid-template-columns: 1fr;
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  /* Grid alignment */
  .place-center {
    place-items: center;
  }

  .place-start {
    place-items: start;
  }

  .place-end {
    place-items: end;
  }

  /* Gap utilities */
  .gap-1 {
    gap: var(--space-1);
  }

  .gap-2 {
    gap: var(--space-2);
  }

  .gap-3 {
    gap: var(--space-3);
  }

  .gap-4 {
    gap: var(--space-4);
  }

  .gap-5 {
    gap: var(--space-5);
  }

  .gap-6 {
    gap: var(--space-6);
  }

  .gap-8 {
    gap: var(--space-8);
  }

  .gap-9 {
    gap: var(--space-9);
  }

  .gap-10 {
    gap: var(--space-10);
  }

  /* text alignment utilities */
  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }
}