/*
 * Alethio design system — aligned with Apple's Human Interface Guidelines.
 * System font, system color palette, generous radii, restrained depth,
 * translucent "materials", and 44pt minimum controls.
 */

:root {
    /* Backgrounds */
    --hig-bg: #f2f2f7;                 /* systemGroupedBackground */
    --hig-bg-elevated: #ffffff;        /* card / elevated surface   */

    /* Fills (for subtly grouped rows / inset blocks) */
    --hig-fill: rgba(120, 120, 128, 0.12);
    --hig-fill-soft: rgba(120, 120, 128, 0.08);

    /* Labels */
    --hig-label: #1d1d1f;
    --hig-label-secondary: rgba(60, 60, 67, 0.60);
    --hig-label-tertiary: rgba(60, 60, 67, 0.30);

    /* Separators (hairlines) */
    --hig-separator: rgba(60, 60, 67, 0.18);
    --hig-separator-opaque: #d1d1d6;

    /* System accent colors */
    --hig-blue:   #007aff;
    --hig-green:  #34c759;
    --hig-red:    #ff3b30;
    --hig-orange: #ff9500;
    --hig-yellow: #ffcc00;
    --hig-purple: #af52de;
    --hig-pink:   #ff2d55;
    --hig-teal:   #30b0c7;
    --hig-indigo: #5856d6;

    /* Geometry — generous, polished radii */
    --hig-radius-card: 24px;
    --hig-radius-control: 14px;
    --hig-radius-field: 14px;

    /* Elevation — soft, layered, low-contrast */
    --hig-shadow-card: 0 1px 1px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(31, 38, 135, 0.07),
        0 24px 60px rgba(31, 38, 135, 0.06);

    /* Glass material */
    --hig-glass-bg: rgba(255, 255, 255, 0.62);
    --hig-glass-border: rgba(255, 255, 255, 0.7);
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--hig-label);
    letter-spacing: -0.01em;
    min-height: 100vh;
    /* Soft, professional gradient backdrop so the glass material reads. */
    background:
        radial-gradient(1100px 600px at 12% -8%, rgba(0, 122, 255, 0.10), transparent 60%),
        radial-gradient(1000px 620px at 100% 0%, rgba(88, 86, 214, 0.10), transparent 55%),
        radial-gradient(900px 700px at 50% 120%, rgba(52, 199, 89, 0.06), transparent 60%),
        linear-gradient(180deg, #f4f6fb 0%, #eef0f6 100%);
    background-attachment: fixed;
}

/* Responsive base ------------------------------------------------------- */
body { overflow-x: hidden; }
img { max-width: 100%; }
/* Inputs are >=16px so iOS Safari never auto-zooms on focus. */

/* Typography helpers ---------------------------------------------------- */
.hig-large-title { font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.hig-title       { font-weight: 700; letter-spacing: -0.021em; }
.hig-headline    { font-weight: 600; letter-spacing: -0.014em; }
.hig-secondary   { color: var(--hig-label-secondary); }
.hig-tertiary    { color: var(--hig-label-tertiary); }
.hig-mono-code   { font-variant-numeric: tabular-nums; letter-spacing: 0.14em; font-weight: 700; }

/* Material navigation bar ---------------------------------------------- */
.hig-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 12px rgba(31, 38, 135, 0.05);
}

/* Cards — frosted glass tiles ----------------------------------------- */
.hig-card {
    background: var(--hig-glass-bg);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid var(--hig-glass-border);
    border-radius: var(--hig-radius-card);
    box-shadow: var(--hig-shadow-card);
}

/* Inset grouped block (for codes, info) -------------------------------- */
.hig-group {
    background-color: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 16px;
}

/* Buttons -------------------------------------------------------------- */
.hig-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1.25rem;
    border: none;
    border-radius: var(--hig-radius-control);
    font-family: inherit;
    font-size: 17px;
    font-weight: 590;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease, background-color 0.15s ease, transform 0.05s ease;
    -webkit-appearance: none;
    appearance: none;
}
.hig-btn:active { transform: scale(0.985); }
.hig-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.30); }

.hig-btn--primary {
    background-image: linear-gradient(180deg, #2a90ff 0%, #007aff 100%);
    color: #ffffff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 122, 255, 0.28);
}
.hig-btn--primary:hover { filter: brightness(1.05); box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 8px 20px rgba(0, 122, 255, 0.34); }

.hig-btn--tinted { background-color: rgba(0, 122, 255, 0.12); color: var(--hig-blue); }
.hig-btn--tinted:hover { background-color: rgba(0, 122, 255, 0.18); }

.hig-btn--gray { background-color: var(--hig-fill); color: var(--hig-label); }
.hig-btn--gray:hover { background-color: rgba(120, 120, 128, 0.18); }

.hig-btn--danger { background-color: var(--hig-red); color: #ffffff; }
.hig-btn--danger:hover { filter: brightness(1.06); }

.hig-btn--block { width: 100%; }

.hig-btn--sm {
    min-height: 36px;
    padding: 0 0.85rem;
    font-size: 14px;
    border-radius: 10px;
}

/* Small role badge */
.hig-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.01em;
}
.hig-badge--admin { background: rgba(0, 122, 255, 0.12); color: var(--hig-blue); }
.hig-badge--joined { background: rgba(52, 199, 89, 0.15); color: #248a3d; }

.hig-link { color: var(--hig-blue); text-decoration: none; font-weight: 500; }
.hig-link:hover { text-decoration: underline; }

/* Form fields ---------------------------------------------------------- */
.hig-field {
    width: 100%;
    min-height: 44px;
    padding: 0.7rem 0.9rem;
    font-family: inherit;
    font-size: 17px;
    color: var(--hig-label);
    background-color: var(--hig-bg-elevated);
    border: 1px solid var(--hig-separator-opaque);
    border-radius: var(--hig-radius-field);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hig-field::placeholder { color: var(--hig-label-tertiary); }
.hig-field:focus {
    border-color: var(--hig-blue);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15);
}

.hig-label-text {
    display: block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hig-label-secondary);
    margin-bottom: 0.5rem;
}