/* NCSIM design tokens. Look: SUNY steady. Type: Source Sans 3. Chosen by Rajveer, October 27, 2026.
   Status: proposal for PruTech review; not SUNY-approved. Decision record:
   Research/Design system/Design system foundation.md.
   Two layers, following the NYS Design System model:
   1. Primitives: raw values. Do not use directly in components.
   2. Roles: what a value is for. Components use only these. */

:root {
  /* 1. Primitives: SUNY brand palette, read from suny.edu/brand/color-palette on Oct 27 */
  --ds-suny-dark-blue: #02235c;   /* PMS 281 C */
  --ds-suny-blue: #00539b;        /* PMS 2935 C */
  --ds-suny-light-blue: #009ee0;  /* decoration only, 3.01:1 on white */
  --ds-suny-yellow: #ffe415;      /* decoration only, beside a dark label */
  --ds-suny-purple: #781e7f;      /* secondary palette */

  /* Primitives: proposed tints and shades (not SUNY values) */
  --ds-blue-strong: #003f78;
  --ds-blue-100: #d6e4f2;
  --ds-blue-50: #eef4fa;
  --ds-neutral-900: #1b1f24;
  --ds-neutral-700: #3f4752;
  --ds-neutral-600: #4b5563;
  --ds-neutral-500: #6b7280;
  --ds-neutral-300: #d3d9e1;
  --ds-neutral-200: #e5e9ee;
  --ds-neutral-100: #edeff2;
  --ds-neutral-50: #f4f6f9;
  --ds-white: #ffffff;
  --ds-green-700: #1c6b37;  --ds-green-50: #e7f4ec;
  --ds-amber-800: #7a4a00;  --ds-amber-50: #fff4d6;  --ds-amber-500: #b07800;
  --ds-red-700: #a3261c;    --ds-red-50: #fcebea;
  --ds-purple-50: #f5ecf6;

  /* 2. Roles: color. Contrast on the stated background in brackets. */
  --ds-color-text: var(--ds-neutral-900);             /* 16.56:1 on white */
  --ds-color-text-muted: var(--ds-neutral-600);       /* 7.56:1 on white, 6.98:1 on alt */
  --ds-color-text-disabled: var(--ds-neutral-600);    /* disabled text stays readable */
  --ds-color-placeholder: #767676;                    /* placeholder example text, neutral gray, the lightest that meets 4.5:1 on white (4.54:1) */
  --ds-color-surface: var(--ds-white);
  --ds-color-surface-alt: var(--ds-neutral-50);
  --ds-color-surface-disabled: var(--ds-neutral-100);
  --ds-color-border: var(--ds-neutral-300);           /* decorative dividers only */
  --ds-color-border-control: #757575;                 /* disabled edges and outlined tags, neutral gray, 4.61:1 */
  /* One default edge for every input: fields, selects, text areas, choice cards and the box or circle inside them.
     #CCCCCC is 1.6:1 on white, below WCAG 1.4.11 (3:1). #949494 is the lightest pure gray that passes. Owner decision pending. */
  --ds-color-border-input: #cccccc;
  --ds-color-border-input-hover: #999999;
  --ds-color-border-choice: var(--ds-color-border-input);
  --ds-color-border-choice-hover: var(--ds-color-border-input-hover);
  --ds-color-border-field: var(--ds-color-border-input);
  --ds-color-action: var(--ds-suny-blue);             /* 7.75:1 */
  --ds-color-action-strong: var(--ds-blue-strong);    /* hover and pressed */
  --ds-color-action-subtle: var(--ds-blue-50);        /* selected backgrounds */
  --ds-color-action-subtle-strong: var(--ds-blue-100);/* hover on subtle */
  --ds-color-on-action: var(--ds-white);
  --ds-color-link: var(--ds-suny-blue);
  --ds-color-link-visited: var(--ds-suny-purple);     /* 9.17:1 */
  --ds-color-focus: var(--ds-suny-blue);
  --ds-color-focus-on-dark: var(--ds-suny-yellow);    /* 11.71:1 on dark blue */
  --ds-color-frame: var(--ds-suny-dark-blue);         /* header and footer */
  --ds-color-on-frame: var(--ds-white);               /* 15.03:1 */
  --ds-color-link-on-frame: #bfd7f2;                  /* 10.17:1 */
  --ds-color-highlight: var(--ds-suny-yellow);        /* bars and rules, never text color */
  --ds-color-campus-accent: var(--ds-suny-blue);      /* campus identity strip only */
  --ds-color-overlay: rgb(2 35 92 / 0.55);            /* behind dialogs and drawers */
  --ds-color-skeleton: var(--ds-neutral-200);
  --ds-color-invalid: var(--ds-red-700);

  /* Roles: messages */
  --ds-color-info-text: var(--ds-suny-blue);      --ds-color-info-bg: var(--ds-blue-50);      /* 6.99:1 */
  --ds-color-success-text: var(--ds-green-700);   --ds-color-success-bg: var(--ds-green-50);  /* 5.78:1 */
  --ds-color-warning-text: var(--ds-amber-800);   --ds-color-warning-bg: var(--ds-amber-50);  /* 6.83:1 */
  --ds-color-warning-border: var(--ds-amber-500);
  --ds-color-error-text: var(--ds-red-700);       --ds-color-error-bg: var(--ds-red-50);      /* 6.39:1 */

  /* Roles: class availability, always a word plus an icon */
  --ds-status-open-text: var(--ds-green-700);       --ds-status-open-bg: var(--ds-green-50);
  --ds-status-waitlist-text: var(--ds-amber-800);   --ds-status-waitlist-bg: var(--ds-amber-50);
  --ds-status-full-text: var(--ds-neutral-700);     --ds-status-full-bg: var(--ds-neutral-100);
  --ds-status-closed-text: var(--ds-neutral-700);   --ds-status-closed-bg: var(--ds-neutral-100); /* 8.16:1 */
  --ds-status-soon-text: var(--ds-suny-purple);     --ds-status-soon-bg: var(--ds-purple-50);   /* 7.95:1 */

  /* Type: families. Script fallbacks cover the 12 NYS languages. */
  --ds-font-scripts: "Noto Sans SC", "Noto Sans TC", "Noto Sans KR", "Noto Sans Bengali",
    "Noto Sans Arabic", "Noto Sans Hebrew";
  --ds-font-system: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ds-font-body: "Source Sans 3", var(--ds-font-scripts), var(--ds-font-system);
  --ds-font-heading: var(--ds-font-body);   /* Gotham can replace this if SUNY licenses it */
  --ds-font-urdu: "Noto Nastaliq Urdu", "Noto Sans Arabic", var(--ds-font-system);
  --ds-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type: weights */
  --ds-weight-regular: 400;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;

  /* Type: sizes and line heights, phone first. Larger screens step up below. */
  --ds-text-small: 0.875rem;    --ds-leading-small: 1.375rem;  /* metadata only; the floor */
  --ds-text-body: 1.0625rem;    --ds-leading-body: 1.4625rem;  /* 17px; leading 10% tighter (Rajveer, October 27) */
  --ds-text-body-lg: 1.1875rem; --ds-leading-body-lg: 1.6875rem;/* course descriptions; 10% tighter */
  --ds-text-label: 1rem;        --ds-leading-label: 1.5rem;    /* buttons, fields, tags */
  --ds-text-h4: 1.125rem;       --ds-leading-h4: 1.625rem;
  --ds-text-h3: 1.25rem;        --ds-leading-h3: 1.75rem;
  --ds-text-h2: 1.5rem;         --ds-leading-h2: 2rem;
  --ds-text-h1: 1.75rem;        --ds-leading-h1: 2.25rem;
  --ds-text-display: 2rem;      --ds-leading-display: 2.5rem;
  --ds-measure: 68ch;

  /* Space: 4px base */
  --ds-space-1: 0.25rem;  --ds-space-2: 0.5rem;   --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;     --ds-space-5: 1.25rem;  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;     --ds-space-10: 2.5rem;  --ds-space-12: 3rem;
  --ds-space-16: 4rem;    --ds-space-24: 6rem;

  /* Layout: breakpoints follow NYSDS (320, 480, 768, 1024, 1280). Gutters by width. */
  --ds-gutter: 1rem;
  --ds-content-max: 72rem;
  --ds-target-min: 2.75rem;     /* 44px touch targets for actions */
  --ds-target-compact: 2.25rem; /* 36px: chips and secondary icon buttons; WCAG 2.5.8 needs 24 */
  --ds-control-height: 3.25rem; /* 52px: default buttons, fields and choice cards share one height */
  --ds-control-height-sm: 2.75rem; /* 44px: small buttons */
  --ds-text-control: 1.125rem;  /* 18px: text typed into fields and default button labels */
  --ds-header-height: 4rem;     /* sticky header; scroll-padding uses it so focus is never hidden */
  --ds-drawer-width: min(24rem, 100vw);

  /* Shape and depth */
  --ds-radius-sm: 0.25rem;      /* buttons, fields */
  --ds-radius-md: 0.5rem;       /* cards, dialogs */
  --ds-radius-pill: 999px;      /* status and chips */
  --ds-border-width: 1px;
  --ds-border-width-strong: 2px;
  --ds-highlight-width: 0.3125rem;   /* 5px, as on explore.suny.edu; pair with var(--ds-color-highlight) */
  --ds-shadow-raised: 0 2px 8px rgb(2 35 92 / 0.12);
  --ds-shadow-overlay: 0 12px 32px rgb(2 35 92 / 0.24);
  --ds-focus-width: 3px;
  --ds-focus-offset: 2px;

  /* Layers */
  --ds-z-sticky: 10;
  --ds-z-drawer: 30;
  --ds-z-dialog: 40;
  --ds-z-skip: 50;

  /* Motion */
  --ds-duration: 150ms;
  --ds-duration-hover: 250ms;
  --ds-duration-slow: 250ms;    /* drawers */
  --ds-easing: cubic-bezier(0.2, 0, 0, 1);
}

@media (min-width: 480px) { :root { --ds-gutter: 1.25rem; } }
@media (min-width: 768px) {
  :root {
    --ds-gutter: 2rem;
    --ds-text-h3: 1.375rem;  --ds-leading-h3: 1.875rem;
    --ds-text-h2: 1.75rem;   --ds-leading-h2: 2.25rem;
    --ds-text-h1: 2.25rem;   --ds-leading-h1: 2.75rem;
    --ds-text-display: 2.75rem; --ds-leading-display: 3.25rem;
  }
}
@media (min-width: 1280px) { :root { --ds-gutter: 4rem; } }
@media (prefers-reduced-motion: reduce) { :root { --ds-duration: 0ms; --ds-duration-hover: 0ms; --ds-duration-slow: 0ms; } }

/* Urdu is usually read in Nastaliq; it needs extra line height. */
:lang(ur) { font-family: var(--ds-font-urdu); line-height: 2.2; }

/* Logo sizes. SUNY's published files are 278 by 137 PNGs; request vector files before launch. */
:root {
  --ds-logo-height: 3rem;           /* 48px on phones so logo, name and Menu share one row; suny.edu shows about 70px */
  --ds-logo-height-footer: 4.5rem;  /* 72px */
}
@media (min-width: 768px) { :root { --ds-logo-height: 4.5rem; --ds-header-height: 5.5rem; } }  /* 72px; suny.edu shows 124 to 137px */