/* ==========================================================================
   Skolon Design System — Core Tokens
   Typography, colors, spacing, borders, radii, shadows, layout.
   Source of truth: source/design-system-foundations.md
   ========================================================================== */

/* Self-hosted Poppins — Skolon-supplied TTFs in /fonts.
   Only 400 and 600 are shipped; those are the only two weights the system uses. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Poppins-SemiBold.ttf') format('truetype');
}

:root {
  /* ----- Typography ------------------------------------------------------- */
  --font-family: 'Poppins', system-ui, sans-serif;

  --font-size-lg: 1.125rem;   /* heading-view */
  --font-size-md: 1rem;       /* heading-segment */
  --font-size-sm: 0.875rem;   /* body / body-bold */
  --font-size-xs: 0.75rem;    /* caption */

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 600;   /* alias — Skolon type system only uses 400 and 600 */

  --line-height-lg: 1.5rem;
  --line-height-md: 1.375rem;
  --line-height-sm: 1.25rem;
  --line-height-xs: 1rem;

  /* ----- Colors — Text ---------------------------------------------------- */
  --color-font: #333333;
  --color-font-sub: #546365;
  --color-font-inverse: #ffffff;

  /* ----- Colors — Brand --------------------------------------------------- */
  --color-main: #39b0bb;          /* Skolon teal */
  --color-main-sub: #ebf7f8;      /* light brand tint */

  /* ----- Colors — Semantic ------------------------------------------------ */
  --color-error: #e67c7a;
  --color-error-sub: #fdf2f2;
  --color-warning: #ffba0c;
  --color-warning-sub: #fff8e7;
  --color-success: #69a677;
  --color-success-sub: #f0f6f2;

  /* ----- Colors — UI surfaces -------------------------------------------- */
  --color-icon: #333333;
  --color-focus: #36495D;
  --color-disable: #dedede;
  --color-border:  #dedede;  /* element borders (inputs, outlined buttons, chips idle, tables) */
  --color-divider: #f4f4f4;
  --color-hover-02dp: #f4f4f4;
  --color-hover-01dp: #f9f9f9;
  --color-background: #fcfcfc;
  --color-element: #ffffff;

  /* ----- Spacing (0.25rem base unit) ------------------------------------- */
  /* Canonical values are 1, 2, 3, 4, 6, 9 — use these. 5, 7, 8 exist to
     keep the scale contiguous but are intentionally skipped in designs. */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px — rarely used */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 1.75rem;   /* 28px — rarely used */
  --space-8: 2rem;      /* 32px — rarely used */
  --space-9: 2.25rem;   /* 36px */

  /* ----- Border ---------------------------------------------------------- */
  --border-default: 0.0625rem solid var(--color-border);

  /* ----- Radii ----------------------------------------------------------- */
  --radius-sm: 0.5rem;      /* badges, chips, tags */
  --radius-md: 0.75rem;     /* buttons, inputs, nav items */
  --radius-lg: 1rem;        /* menus, popovers */
  --radius-xl: 1.5rem;      /* 24px — cards, modals (STANDARD) */
  --radius-2xl: 2.25rem;    /* 36px — rare; bottom-sheet top corners */
  --radius-full: 9999rem;   /* pill / circle */

  /* ----- Elevation ------------------------------------------------------- */
  /* No general-use shadow. Floating elements only. */
  --shadow-floating: 0 0.1875rem 0.375rem rgba(0, 0, 0, 0.12);

  /* ----- Breakpoints ----------------------------------------------------- */
  /* Authoring values for `@media (min-width: …)`. Always rem, never px,
     so user font-size scaling is respected. */
  --breakpoint-md: 40rem;   /*  640px @ 16px root */
  --breakpoint-lg: 51.25rem; /*  820px */
  --breakpoint-xl: 64rem;   /* 1024px */

  /* ----- Container padding (per breakpoint) ----------------------------- */
  --container-padding-sm: 1rem;      /* 16 — matches md so edges stay consistent on phones/tablets */
  --container-padding-md: 1rem;      /* 16 */
  --container-padding-lg: 1.5rem;    /* 24 */
  --container-padding-xl: 2.25rem;   /* 36 */

  /* ----- Grid (per breakpoint) ----------------------------------------- */
  --grid-columns-sm: 4;
  --grid-columns-md: 8;
  --grid-columns-lg: 12;
  --grid-columns-xl: 12;

  --grid-gutter-sm: 0.75rem;
  --grid-gutter-md: 1rem;
  --grid-gutter-lg: 1.5rem;
  --grid-gutter-xl: 1.5rem;

  /* ----- Layout ---------------------------------------------------------- */
  --max-width: 75rem;
  --view-top: 0.75rem;

  /* Legacy aliases — match the `lg` breakpoint values so existing components
     don't break. Prefer the breakpoint-specific tokens above for new work. */
  --grid-columns: 12;
  --grid-gutter: 1.5rem;
  --container-padding: 1.5rem;
  --view-right: 2.25rem;
  --view-bottom: 3rem;
  --view-left: 2.25rem;
}

/* ==========================================================================
   Responsive container — picks up the breakpoint-specific padding/gutter
   automatically. Use as the page-level wrapper.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-sm);
  box-sizing: border-box;
}
@media (min-width: 40rem) { .container { padding-inline: var(--container-padding-md); } }
@media (min-width: 51.25rem) { .container { padding-inline: var(--container-padding-lg); } }
@media (min-width: 64rem) { .container { padding-inline: var(--container-padding-xl); } }

/* 12/8/4-col grid that follows the breakpoint columns and gutter. */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-sm), minmax(0, 1fr));
  gap: var(--grid-gutter-sm);
}
@media (min-width: 40rem) {
  .grid { grid-template-columns: repeat(var(--grid-columns-md), minmax(0, 1fr)); gap: var(--grid-gutter-md); }
}
@media (min-width: 51.25rem) {
  .grid { grid-template-columns: repeat(var(--grid-columns-lg), minmax(0, 1fr)); gap: var(--grid-gutter-lg); }
}
@media (min-width: 64rem) {
  .grid { grid-template-columns: repeat(var(--grid-columns-xl), minmax(0, 1fr)); gap: var(--grid-gutter-xl); }
}

/* ==========================================================================
   Base & semantic defaults
   Default weight is 400. 600 only on body-bold component headlines.
   ========================================================================== */

html, body {
  font-family: var(--font-family);
  color: var(--color-font);
  background: var(--color-background);
  font-size: var(--font-size-md);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Skolon uses semi-thin 400 for headings. The hierarchy is achieved by size,
   not weight. Never bump up from 400 unless explicitly using body-bold. */

.heading-view,
h1 {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-lg);
  font-weight: var(--font-weight-regular);
  color: var(--color-font);
  margin: 0;
}

.heading-segment,
h2, h3 {
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-regular);
  color: var(--color-font);
  margin: 0;
}

.body, p {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-regular);
  color: var(--color-font);
  margin: 0;
}

.body-bold, strong, b {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-font);
}

.caption, small {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-font-sub);
}

.text-sub { color: var(--color-font-sub); }
.text-inverse { color: var(--color-font-inverse); }

/* Keyboard focus — tab navigation only; mouse interactions never show it.
   Each component overrides the element's background to match its own hover. */
:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}
:focus:not(:focus-visible) { outline: none; }