/* =============================================
   ARCHITECT THEME TOKENS — Light, no dark backgrounds.
   Scoped to .architect-theme so the existing dark student
   portal is untouched. Used by the Digital Syllabus
   Acknowledgment feature (v9/math-engine).

   NOTE: The build brief referenced
   public/assets/css/architect-tokens.css. This repo's student
   portal lives at student-portal/ (not public/), so the file is
   created here and linked from student-portal/index.html.
   ============================================= */

.architect-theme {
    /* Surfaces — all light. Never a dark background in this theme.
       Canonical Architect (Blueprint) palette — matches drijezie.com. */
    --arch-bg:        #F7F6F2;   /* paper */
    --arch-surface:   #FFFFFF;   /* card */
    --arch-surface-2: #ECEAE3;   /* recessed panel */
    --arch-line:      rgba(27,42,74,.10);   /* hairline / blueprint grid */
    --arch-line-strong: rgba(27,42,74,.20);

    /* Ink */
    --arch-ink:       #1B2A4A;   /* headings / body */
    --arch-ink-soft:  #44506B;   /* secondary text */
    --arch-ink-muted: #5C6473;   /* captions */

    /* Accent — drafting blue (not gold, not dark bg) */
    --arch-accent:    #1C4E80;
    --arch-accent-700:#163E66;
    --arch-accent-50: #E7EFF7;

    /* Status (light tints only) */
    --arch-ok:        #2F7D4F;
    --arch-ok-bg:     #E8F3EC;
    --arch-warn:      #9A6A1E;
    --arch-warn-bg:   #F6EEDD;
    --arch-err:       #B23A3A;
    --arch-err-bg:    #F7E7E7;

    --arch-radius:    14px;
    --arch-radius-sm: 10px;
    --arch-shadow:    0 4px 14px rgba(27,42,74,.07);

    font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: var(--arch-ink);
}

/* Card container — light, blueprint grid hint on the page surface */
.architect-theme .arch-card {
    background: var(--arch-surface);
    border: 1px solid var(--arch-line);
    border-radius: var(--arch-radius);
    box-shadow: var(--arch-shadow);
    padding: 22px 24px;
}

.architect-theme .arch-panel {
    background: var(--arch-surface-2);
    border: 1px solid var(--arch-line);
    border-radius: var(--arch-radius-sm);
    padding: 16px 18px;
}

.architect-theme .arch-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    font-weight: 700;
    color: var(--arch-accent);
}

.architect-theme h1.arch-title,
.architect-theme h2.arch-title {
    font-family: 'Space Grotesk', 'Outfit', system-ui, sans-serif;
    color: var(--arch-ink);
    margin: 4px 0 6px;
}

.architect-theme .arch-sub {
    color: var(--arch-ink-soft);
    font-size: 13px;
    line-height: 1.5;
}

.architect-theme label.arch-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--arch-ink-soft);
    margin: 0 0 6px;
}

.architect-theme .arch-input,
.architect-theme .arch-select {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    background: var(--arch-surface);
    color: var(--arch-ink);
    border: 1.5px solid var(--arch-line-strong);
    border-radius: var(--arch-radius-sm);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.architect-theme .arch-input:focus,
.architect-theme .arch-select:focus {
    border-color: var(--arch-accent);
    box-shadow: 0 0 0 3px var(--arch-accent-50);
}

.architect-theme .arch-check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--arch-surface-2);
    border: 1px solid var(--arch-line);
    border-radius: var(--arch-radius-sm);
    margin-bottom: 10px;
    cursor: pointer;
}

.architect-theme .arch-check-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--arch-accent);
    flex-shrink: 0;
    cursor: pointer;
}

.architect-theme .arch-check-row span {
    font-size: 13px;
    color: var(--arch-ink);
    line-height: 1.45;
}

.architect-theme .arch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: var(--arch-accent);
    color: #FFFFFF;
    border: none;
    border-radius: var(--arch-radius-sm);
    font-weight: 700;
    font-size: 15px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.architect-theme .arch-btn:hover:not(:disabled) { background: var(--arch-accent-700); }
.architect-theme .arch-btn:active:not(:disabled) { transform: translateY(1px); }
.architect-theme .arch-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.architect-theme .arch-btn-ghost {
    background: transparent;
    color: var(--arch-accent);
    border: 1.5px solid var(--arch-line-strong);
    width: auto;
    padding: 8px 14px;
    font-size: 13px;
}
.architect-theme .arch-btn-ghost:hover:not(:disabled) {
    background: var(--arch-accent-50);
}

.architect-theme .arch-divider {
    height: 1px;
    background: var(--arch-line);
    margin: 18px 0;
}

.architect-theme .arch-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}
.architect-theme .arch-pill.ok    { background: var(--arch-ok-bg);   color: var(--arch-ok); }
.architect-theme .arch-pill.warn  { background: var(--arch-warn-bg); color: var(--arch-warn); }
.architect-theme .arch-pill.info  { background: var(--arch-accent-50); color: var(--arch-accent); }

.architect-theme .arch-note {
    font-size: 12px;
    color: var(--arch-ink-muted);
    line-height: 1.5;
}