/* ============================================================
   CES-LINKS — Colors & Type tokens
   Base: Tailwind-compatible (vars work as CSS custom properties
   or mapped into tailwind.config.js extend.colors)
   Brand anchors: primary #7367F0 / bg #F8F7FA / text #2E263D /
   Public Sans / 12px border radius (rounded-xl).
   ============================================================ */

/* ---------- Fonts ---------- */
/* Public Sans — primary UI face (locally served or Google Fonts fallback) */
@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap");
/* Outfit — display / logo wordmark (used in hero titles + logo) */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap");
/* JetBrains Mono — code samples inside admin docs */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ========== Color — Brand ========== */
  --color-primary:          #7367F0;   /* CES primary indigo */
  --color-primary-hover:    #685DD8;
  --color-primary-active:   #5D54BF;
  --color-primary-soft:     #EEEDFD;   /* 16% fill background */
  --color-primary-softer:   #F7F4FF;   /* surface tint */

  /* Neutrals (text + surfaces) */
  --color-text:             #2E263D;   /* primary text 0.90 */
  --color-text-secondary:   rgba(46, 38, 61, 0.68);
  --color-text-disabled:    rgba(46, 38, 61, 0.38);
  --color-heading:          rgba(46, 38, 61, 0.90);
  --color-body:             rgba(46, 38, 61, 0.78);

  --color-bg:               #F8F7FA;   /* app background */
  --color-surface:          #FFFFFF;   /* card, panel */
  --color-surface-2:        #FAFAFC;
  --color-border:           rgba(46, 38, 61, 0.12);
  --color-border-strong:    rgba(46, 38, 61, 0.22);
  --color-divider:          rgba(46, 38, 61, 0.08);
  --color-overlay:          rgba(46, 38, 61, 0.50);

  /* Semantic ambient */
  --color-success:          #067647;
  --color-success-soft:     rgba(6, 118, 71, 0.16);
  --color-warning:          #B76E00;
  --color-warning-soft:     rgba(183, 110, 0, 0.16);
  --color-error:            #B42318;
  --color-error-soft:       rgba(180, 35, 24, 0.16);
  --color-info:             #175CD3;
  --color-info-soft:        rgba(23, 92, 211, 0.14);

  /* ========== Color — Student Profile Semantics ==========
     These colors are LOAD-BEARING. They group data categories
     within a student's record and are used in the Student
     Services and Instructor portals. Do not substitute. */
  --student-identity:       #4F174F;   /* About Me / Identity — purple */
  --student-identity-soft:  rgba(79, 23, 79, 0.10);
  --student-contact:        #153D5A;   /* Contact — navy */
  --student-contact-soft:   rgba(21, 61, 90, 0.10);
  --student-family:         #067647;   /* Family & Guardianship — green */
  --student-family-soft:    rgba(6, 118, 71, 0.10);
  --student-transport:      #9C3E06;   /* Transportation — orange */
  --student-transport-soft: rgba(156, 62, 6, 0.10);
  --student-facilities:     #175CD3;   /* Facilities — blue */
  --student-facilities-soft:rgba(23, 92, 211, 0.10);

  /* ========== Typography ========== */
  --font-sans:    "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Outfit", "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Scale (matches Figma Materio scale, mapped to Public Sans) */
  --fs-h1: 46px;  --lh-h1: 68px;
  --fs-h2: 38px;  --lh-h2: 56px;
  --fs-h3: 28px;  --lh-h3: 42px;
  --fs-h4: 24px;  --lh-h4: 38px;
  --fs-h5: 18px;  --lh-h5: 28px;
  --fs-h6: 15px;  --lh-h6: 22px;
  --fs-body:       15px;  --lh-body:       22px;
  --fs-body-sm:    13px;  --lh-body-sm:    20px;
  --fs-caption:    13px;  --lh-caption:    18px;
  --fs-input:      15px;  --lh-input:      24px;
  --fs-input-sm:   13px;  --lh-input-sm:   22px;
  --fs-button:     15px;  --lh-button:     22px;
  --fs-button-sm:  13px;  --lh-button-sm:  18px;
  --fs-button-lg:  17px;  --lh-button-lg:  26px;
  --fs-overline:   12px;  --lh-overline:   32px;

  /* ========== Shape ========== */
  --radius-xs:   4px;   /* chips, inline badges */
  --radius-sm:   6px;   /* small buttons */
  --radius-md:   8px;
  --radius-lg:   12px;  /* DEFAULT — cards, inputs, buttons (rounded-xl) */
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ========== Shadow ========== */
  --shadow-xs:  0 1px 2px 0 rgba(46, 38, 61, 0.08);
  --shadow-sm:  0 1px 5px 0 rgba(58, 53, 65, 0.18);   /* button */
  --shadow-md:  0 2px 10px 0 rgba(58, 53, 65, 0.10);  /* card */
  --shadow-lg:  0 4px 18px 0 rgba(58, 53, 65, 0.10);  /* menu */
  --shadow-xl:  0 8px 32px 0 rgba(46, 38, 61, 0.20);  /* dialog */
  --shadow-focus: 0 0 0 4px rgba(115, 103, 240, 0.18);

  /* ========== Spacing (4px base) ========== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ========== Motion ========== */
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-emphasis: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast:   120ms;
  --duration-med:    200ms;
  --duration-slow:   320ms;
}

/* ---------- Semantic element defaults ---------- */
html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font-family: var(--font-sans); font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 500; color: var(--color-heading); letter-spacing: -0.02em; }
h2, .h2 { font-family: var(--font-sans); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 500; color: var(--color-heading); letter-spacing: -0.015em; }
h3, .h3 { font-family: var(--font-sans); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; color: var(--color-heading); letter-spacing: -0.01em; }
h4, .h4 { font-family: var(--font-sans); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 500; color: var(--color-heading); }
h5, .h5 { font-family: var(--font-sans); font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: 500; color: var(--color-heading); }
h6, .h6 { font-family: var(--font-sans); font-size: var(--fs-h6); line-height: var(--lh-h6); font-weight: 600; color: var(--color-heading); }

.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }

p, .body    { font-size: var(--fs-body);    line-height: var(--lh-body);    color: var(--color-body); }
.body-sm    { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--color-body); }
.caption    { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--color-text-secondary); }
.overline   { font-size: var(--fs-overline);line-height: var(--lh-overline);text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--color-text-secondary); }
code, kbd, .code { font-family: var(--font-mono); font-size: 13px; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }