/* ============================================================================
   DREAMWEB — Foundations
   Source of truth: Figma "DM Web -  Design System" → 01 - Foundations
   Variable collections: Primitives, Semantic, Layout
   Do not add values here that are not defined in Foundations.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Primitives ------------------------------------------------------- */
  --brand-orange-500: #f57000;
  --brand-orange-600: #db6200;
  --brand-orange-700: #c45700;

  --neutral-black: #000000;
  --neutral-950: #0a0a0a;
  --neutral-900: #141414;
  --neutral-800: #242424;
  --neutral-700: #363636;
  --neutral-500: #737373;
  --neutral-400: #a3a3a3;
  --neutral-200: #e5e5e5;
  --neutral-100: #f3f3f3;
  --neutral-white: #ffffff;

  --feedback-red-500: #e5484d;

  /* --- Semantic (aliases of Primitives) -------------------------------- */
  --background-primary: var(--neutral-950);
  --background-secondary: var(--neutral-900);

  --surface-primary: var(--neutral-900);
  --surface-secondary: var(--neutral-800);
  --surface-elevated: var(--neutral-800);

  --text-primary: var(--neutral-white);
  --text-secondary: var(--neutral-400);
  --text-disabled: var(--neutral-500);
  --text-inverse: var(--neutral-950);
  --text-onbrand: var(--neutral-white);

  --border-default: var(--neutral-700);
  --border-subtle: var(--neutral-800);

  --icon-primary: var(--neutral-white);
  --icon-secondary: var(--neutral-400);

  --action-primary: var(--brand-orange-500);
  --action-primary-hover: var(--brand-orange-600);
  --action-primary-pressed: var(--brand-orange-700);
  --action-disabled: var(--neutral-200);

  --feedback-error: var(--feedback-red-500);

  /* --- Spacing ---------------------------------------------------------- */
  --spacing-04: 4px;
  --spacing-08: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  /* --- Radius ----------------------------------------------------------- */
  --radius-none: 0px;
  --radius-small: 2px;
  --radius-medium: 4px;
  --radius-large: 8px;
  --radius-full: 999px;

  /* --- Layout (08 - Layout / Desktop Guidelines) ------------------------ */
  --layout-desktop-sidebar-width: 240px;
  --layout-desktop-page-padding: 40px;
  --layout-desktop-content-max-width: 1120px;
  --layout-desktop-topbar-height: 72px;
  --layout-desktop-grid-gutter: 24px;
  --layout-breakpoint-desktop: 1024px;

  /* --- Typography (02 - Typography) ------------------------------------ */
  --font-family: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  --display-large-size: 36px; --display-large-line: 40px; --display-large-weight: 700;
  --heading-h1-size: 28px;   --heading-h1-line: 34px;   --heading-h1-weight: 700;
  --heading-h2-size: 24px;   --heading-h2-line: 30px;   --heading-h2-weight: 700;
  --heading-h3-size: 20px;   --heading-h3-line: 26px;   --heading-h3-weight: 600;
  --body-large-size: 16px;   --body-large-line: 24px;   --body-large-weight: 400;
  --body-medium-size: 14px;  --body-medium-line: 20px;  --body-medium-weight: 400;
  --body-small-size: 12px;   --body-small-line: 18px;   --body-small-weight: 400;
  --label-large-size: 14px;  --label-large-line: 20px;  --label-large-weight: 600;
  --label-medium-size: 12px; --label-medium-line: 16px; --label-medium-weight: 600;
  --caption-size: 11px;      --caption-line: 16px;      --caption-weight: 500;
  --overline-size: 11px;     --overline-line: 16px;     --overline-weight: 600;
  --overline-tracking: 1.1px;

  /* --- Field surface ---------------------------------------------------- *
   * The glass treatment shared by every DREAMWEB input surface (Field,
   * Select Field, Location Field, Photo Upload, Search Bar). Values taken
   * verbatim from those components in 02 - Components.                     */
  --field-surface: rgba(17, 17, 17, 0.6);
  --field-border: rgba(255, 255, 255, 0.12);
  --field-blur: 6px;
  --field-height: 48px;
  --field-divider: rgba(255, 255, 255, 0.08);

  /* --- Background (07 - Background) ------------------------------------- */
  --app-background-image: url("../assets/brand/dreamweb-background.png");
  --app-background-opacity: 0.72;
  --app-background-scrim: rgba(0, 0, 0, 0.15);

  /* --- Module Card surface (02 - Components) ---------------------------- *
   * The elevated glass card used by the mobile Home module grid.          */
  --card-surface: rgba(17, 17, 17, 0.45);
  --card-surface-selected: rgba(17, 17, 17, 0.65);
  --card-border: rgba(255, 255, 255, 0.12);
  --card-blur: 10px;
  --card-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.2);

  /* --- Submodule List surface (02 - Components) ------------------------- */
  --list-surface: rgba(17, 17, 17, 0.6);
  --list-border: rgba(255, 255, 255, 0.08);

  /* --- Metadata divider (02 - Components) ------------------------------- */
  --metadata-divider: rgba(255, 255, 255, 0.15);

  /* --- Bottom Navigation surface (02 - Components) ---------------------- */
  --bottomnav-surface: rgba(8, 8, 8, 0.9);
  --bottomnav-border: rgba(255, 255, 255, 0.1);
  --bottomnav-blur: 10px;
}

/* --- Typography utility classes ---------------------------------------- */
.t-display  { font-size: var(--display-large-size); line-height: var(--display-large-line); font-weight: var(--display-large-weight); }
.t-h1       { font-size: var(--heading-h1-size);  line-height: var(--heading-h1-line);  font-weight: var(--heading-h1-weight); }
.t-h2       { font-size: var(--heading-h2-size);  line-height: var(--heading-h2-line);  font-weight: var(--heading-h2-weight); }
.t-h3       { font-size: var(--heading-h3-size);  line-height: var(--heading-h3-line);  font-weight: var(--heading-h3-weight); }
.t-body-lg  { font-size: var(--body-large-size);  line-height: var(--body-large-line);  font-weight: var(--body-large-weight); }
.t-body-md  { font-size: var(--body-medium-size); line-height: var(--body-medium-line); font-weight: var(--body-medium-weight); }
.t-label-lg { font-size: var(--label-large-size); line-height: var(--label-large-line); font-weight: var(--label-large-weight); }
.t-label-md { font-size: var(--label-medium-size);line-height: var(--label-medium-line);font-weight: var(--label-medium-weight); }
.t-caption  { font-size: var(--caption-size);     line-height: var(--caption-line);     font-weight: var(--caption-weight); }
.t-overline {
  font-size: var(--overline-size);
  line-height: var(--overline-line);
  font-weight: var(--overline-weight);
  letter-spacing: var(--overline-tracking);
  text-transform: uppercase;
}