/* Open Design System – Responsive Design Tokens */
/* Mobile-first approach: base = mobile, then scale up with min-width */

:root {
  /* =================================================== */
  /* DEVICE CONTEXT */
  /* =================================================== */

  /* Device Type Identification */
  --device-type: mobile;
  --device-screen-width: 26.875rem;

  /* =================================================== */
  /* RESPONSIVE SPACING SYSTEM */
  /* =================================================== */

  /* Mobile Spacing (Default) - base styles */
  --spacing-system-zero: 0rem;
  --spacing-system-xxs: 0.25rem;   /* 4px */
  --spacing-system-xs: 0.25rem;    /* 4px */
  --spacing-system-xsf: 0.5rem;    /* 8px */
  --spacing-system-s: 0.5rem;      /* 8px */
  --spacing-system-sf: 0.75rem;    /* 12px */
  --spacing-system-m: 0.75rem;     /* 12px */
  --spacing-system-mf: 1rem;       /* 16px */
  --spacing-system-l: 1rem;        /* 16px */
  --spacing-system-lf: 1.5rem;     /* 24px */
  --spacing-system-xl: 1.5rem;     /* 24px */
  --spacing-system-xlf: 2.5rem;    /* 40px */
  --spacing-system-xxl: 2.5rem;    /* 40px */

  /* =================================================== */
  /* RESPONSIVE TYPOGRAPHY SYSTEM */
  /* =================================================== */

  /* Mobile Typography (Default) */
  --font-size-h1-title: 2.5rem;           /* 40px */
  --font-size-h2-sub-title: 1.5rem;       /* 24px */
  --font-size-h3-body: 0.875rem;          /* 14px */
  --font-size-h4-body: 0.875rem;          /* 14px */
  --font-size-h5-caption: 0.75rem;        /* 12px */
  --font-size-h6-caption: 0.75rem;        /* 12px */

  --font-line-space-h1-main-title: 2.5rem;    /* 40px */
  --font-line-space-h2-sub-title: 2rem;       /* 32px */
  --font-line-space-h3-body: 1.25rem;         /* 20px */
  --font-line-space-h4-body: 1.25rem;         /* 20px */
  --font-line-space-h5-caption: 1rem;         /* 16px */
  --font-line-space-h6-caption: 1rem;         /* 16px */

  /* BADGE / STAMP SCALE — a COMPONENT token, not a step in the h1-h6 scale.
   * Family, weight and casing still come from the h5/h6 tokens; this only
   * carries the size a stamp renders at. Deliberately FIXED across
   * breakpoints: a badge must stay subordinate to the row it sits in, and
   * scaling it up on desktop is what ballooned every badge when they were
   * moved onto the 14/20 caption step. */
  --font-size-badge: 0.625rem;                /* 10px */
  --font-line-space-badge: 0.75rem;           /* 12px */

  /* =================================================== */
  /* RESPONSIVE ICON SYSTEM */
  /* =================================================== */

  --icon-size-icon-size: 1rem;    /* 16px */
}

/* =================================================== */
/* TABLET RESPONSIVE TOKENS - md: 800px and above */
/* =================================================== */

@media (min-width: 800px) {
  :root {
    /* Device Context */
    --device-type: tablet;
    --device-screen-width: 50rem;

    /* Tablet Spacing */
    --spacing-system-zero: 0rem;
    --spacing-system-xxs: 0.25rem;   /* 4px */
    --spacing-system-xs: 0.5rem;     /* 8px */
    --spacing-system-xsf: 0.5rem;    /* 8px */
    --spacing-system-s: 0.75rem;     /* 12px */
    --spacing-system-sf: 0.75rem;    /* 12px */
    --spacing-system-m: 1rem;        /* 16px */
    --spacing-system-mf: 1rem;       /* 16px */
    --spacing-system-l: 1.5rem;      /* 24px */
    --spacing-system-lf: 1.5rem;     /* 24px */
    --spacing-system-xl: 2.5rem;     /* 40px */
    --spacing-system-xlf: 2.5rem;    /* 40px */
    --spacing-system-xxl: 3rem;      /* 48px */

    /* Tablet Typography */
    --font-size-h1-title: 3rem;             /* 48px */
    --font-size-h2-sub-title: 2rem;         /* 32px */
    --font-size-h3-body: 1.125rem;          /* 18px */
    --font-size-h4-body: 1.125rem;          /* 18px */
    --font-size-h5-caption: 0.875rem;       /* 14px */
    --font-size-h6-caption: 0.875rem;       /* 14px */

    --font-line-space-h1-main-title: 3.5rem;    /* 56px */
    --font-line-space-h2-sub-title: 2.5rem;     /* 40px */
    --font-line-space-h3-body: 1.5rem;          /* 24px */
    --font-line-space-h4-body: 1.5rem;          /* 24px */
    --font-line-space-h5-caption: 1.25rem;      /* 20px */
    --font-line-space-h6-caption: 1.25rem;      /* 20px */

    /* Tablet Icons */
    --icon-size-icon-size: 1.5rem;  /* 24px */
  }
}

/* =================================================== */
/* DESKTOP RESPONSIVE TOKENS - lg: 1280px and above */
/* =================================================== */

@media (min-width: 1280px) {
  :root {
    /* Device Context */
    --device-type: desktop;
    --device-screen-width: 80rem;

    /* Desktop Spacing */
    --spacing-system-zero: 0rem;
    --spacing-system-xxs: 0.25rem;   /* 4px */
    --spacing-system-xs: 0.5rem;     /* 8px */
    --spacing-system-xsf: 0.5rem;    /* 8px */
    --spacing-system-s: 0.75rem;     /* 12px */
    --spacing-system-sf: 0.75rem;    /* 12px */
    --spacing-system-m: 1rem;        /* 16px */
    --spacing-system-mf: 1rem;       /* 16px */
    --spacing-system-l: 1.5rem;      /* 24px */
    --spacing-system-lf: 1.5rem;     /* 24px */
    --spacing-system-xl: 2.5rem;     /* 40px */
    --spacing-system-xlf: 2.5rem;    /* 40px */
    --spacing-system-xxl: 5rem;      /* 80px */

    /* Desktop Typography */
    --font-size-h1-title: 3.5rem;           /* 56px */
    --font-size-h2-sub-title: 2rem;         /* 32px */
    --font-size-h3-body: 1.125rem;          /* 18px */
    --font-size-h4-body: 1.125rem;          /* 18px */
    --font-size-h5-caption: 0.875rem;       /* 14px */
    --font-size-h6-caption: 0.875rem;       /* 14px */

    --font-line-space-h1-main-title: 4rem;      /* 64px */
    --font-line-space-h2-sub-title: 2.5rem;     /* 40px */
    --font-line-space-h3-body: 1.5rem;          /* 24px */
    --font-line-space-h4-body: 1.5rem;          /* 24px */
    --font-line-space-h5-caption: 1.25rem;      /* 20px */
    --font-line-space-h6-caption: 1.25rem;      /* 20px */

    /* Desktop Icons */
    --icon-size-icon-size: 1.5rem;  /* 24px */
  }
}