/* ======================================================
   BRAND & PRIMITIVE TOKENS
   (Never used directly in UI)
   ====================================================== */
:root {
  /* Brand colors */
  --brand-black-h: 210;   /* #1f2933 */
  --brand-black-s: 25%;
  --brand-black-l: 16%;

  --brand-qbaron-h: 174;  /* #008476 */
  --brand-qbaron-s: 100%;
  --brand-qbaron-l: 26%;

  --brand-tbison-h: 197;  /* #006994 */
  --brand-tbison-s: 100%;
  --brand-tbison-l: 29%;

  --brand-yoosp-h: 239; /* #5a5b9f */
  --brand-yoosp-s: 28%;
  --brand-yoosp-l: 48%;

  /* Navigation colors */
  --nav-yellow-h: 58;     /* #e6e38a */
  --nav-yellow-s: 65%;
  --nav-yellow-l: 72%;

  --nav-cyan-h: 183;      /* #8ae2e6 */
  --nav-cyan-s: 65%;
  --nav-cyan-l: 72%;

  --nav-green-h: 122;     /* #89e68c */
  --nav-green-s: 65%;
  --nav-green-l: 72%;

/* ======================================================
   BRAND BUTTON MODIFIERS
   (Perceptual compensation only)
   ====================================================== */

  /* Defaults */
  --btn-s-delta: -5%;
  --btn-l-delta: +7%;

  --btn-hover-s-delta: 0%;
  --btn-hover-l-delta: +14%;

/* ======================================================
   ACTIVE BRAND
   Change ONLY this block to switch brand
   ====================================================== */

  --brand-h: var(--brand-qbaron-h);
  --brand-s: var(--brand-qbaron-s);
  --brand-l: var(--brand-qbaron-l);
  
  /* QBaron button compensation */
  --btn-l-delta: +5%;
  --btn-hover-l-delta: +10%;

/* ======================================================
   SEMANTIC COLOR TOKENS
   (Used across layout & typography)
   ====================================================== */

  --color-page-bg: hsl(210, 18%, 97%);
  --color-surface: hsl(0, 0%, 100%);
  --color-surface-soft: hsl(210, 25%, 98%);
  --color-surface-alt: hsl(210, 18%, 94%);

  --color-text: hsl(0, 0%, 20%);
  --color-text-soft: hsl(0, 0%, 33%);
  --color-text-strong: hsl(0, 0%, 13%);
  --color-text-inv: hsl(0, 0%, 100%);

  --color-border-light: hsl(0, 0%, 93%);
  --color-border: hsl(0, 0%, 87%);
  --color-border-dark: hsl(0, 0%, 80%);

  --color-link: hsl(210, 100%, 40%);
  --color-link-hover: hsl(174, 70%, 32%);

  --color-header-bg: hsl(
    var(--brand-h),
    var(--brand-s),
    var(--brand-l)
  );

  --color-header-subtitle: hsl(210, 15%, 88%);

  --color-header-link: hsl(
    var(--nav-yellow-h),
    var(--nav-yellow-s),
    var(--nav-yellow-l)
  );

  --color-header-link-hover: hsl(
    var(--nav-cyan-h),
    var(--nav-cyan-s),
    var(--nav-cyan-l)
  );

  --color-status-enabled: hsl(174, 39%, 54%);
  --color-status-disabled: hsl(0, 66%, 47%);

/* ======================================================
   STATE & COMPONENT TOKENS
   (Derived, interactive, perceptual)
   ====================================================== */

  --color-btn-primary: hsl(
    var(--brand-h),
    calc(var(--brand-s) + var(--btn-s-delta)),
    calc(var(--brand-l) + var(--btn-l-delta))
  );

  --color-btn-primary-hover: hsl(
    var(--brand-h),
    calc(var(--brand-s) + var(--btn-hover-s-delta)),
    calc(var(--brand-l) + var(--btn-hover-l-delta))
  );

  --color-btn-file: hsl(210, 100%, 95%);
  --color-btn-file-hover: hsl(210, 100%, 92%);

  --color-accent: var(--color-btn-primary);

/* ======================================================
   LAYOUT & NON-COLOR TOKENS
   ====================================================== */

  --font-base: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --input-height: 44px;
  --input-padding-x: 12px;

/* ======================================================
   PAGE SPACING TOKENS
   ====================================================== */

  --page-gutter: 20px;
}

/* =====================================================
   Base
   ===================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-family: var(--font-base);
}

/* =====================================================
   Links
   ===================================================== */

a {
    text-decoration: none;
    color: inherit;
}

a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-weight: 600;
    color: var(--color-link);
    margin-bottom: 14px;
}

.back-link:hover {
    color: var(--color-link-hover);
}

/* =====================================================
   Header
   ===================================================== */

header {
    background: var(--color-header-bg);
    color: var(--color-text-inv);
    padding: 14px 16px 10px;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
}

header .subtitle {
    margin-top: 6px;
    font-size: 0.95rem;
    color: var(--color-header-subtitle);
}

.header-nav {
    margin-top: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 var(--page-gutter);
}

.header-nav a,
.header-nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    height: 36px;
    padding: 0 10px;
    font-size: 0.95rem;
    font-weight: 600;
    background: transparent;
    border: none;
    color: var(--color-header-link);
    cursor: pointer;
    min-width: auto;
}

.header-nav a:hover,
.header-nav button:hover {
    color: var(--color-header-link-hover);
}

.header-nav a.back i {
    margin-right: 0.3em;
}

.header-nav .back {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.header-nav form {
    display: contents;
}

/* =====================================================
   Breadcrumb
   ===================================================== */

.breadcrumb {
    font-size: 0.85rem;
    color: var(--color-text-soft);

    margin-bottom: 18px;
}

.breadcrumb a {
    color: var(--color-text-soft);
    transition: color 0.15s ease;
}

.breadcrumb a:hover {
    color: var(--color-accent);
}

.breadcrumb span[aria-current="page"] {
    color: var(--color-text-strong);
    font-weight: 600;
}

.breadcrumb a + a::before,
.breadcrumb a + span::before,
.breadcrumb span + span::before {
    content: "›";
    margin: 0 8px;
    color: var(--color-border-dark);
}

/* =====================================================
   Card
   ===================================================== */

.card {
    margin-left: calc(var(--page-gutter) * -0.5);
    margin-right: calc(var(--page-gutter) * -0.5);
    padding: var(--page-gutter);
    background: var(--color-surface);
	border: 1px solid var(--color-border-light);
	border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.card > *:first-child {
    margin-top: 0;
}

.card > *:last-child {
    margin-bottom: 0;
}

/* =====================================================
   Flash Messages
   ===================================================== */

.flash-messages {
    margin: 0 0 24px;
}

.flash-messages .card + .card {
    margin-top: 14px;
}

.card.notice {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    font-size: 0.95rem;
    line-height: 1.5;
    border-width: 1px;
    border-style: solid;

    box-shadow:
        0 3px 10px rgba(0,0,0,0.04),
        inset 0 1px 0 rgba(255,255,255,0.45);
}

.card.notice p {
    display: flex;
    align-items: flex-start;

    gap: 8px;
    margin: 0;
}

.card.notice-r {
    background: hsl(2 100% 97%);
    border-color: hsl(2 70% 80%);
    color: hsl(2 72% 28%);
}

.card.notice-y {
    background: hsl(45 100% 96%);
    border-color: hsl(45 72% 74%);
    color: hsl(42 82% 22%);
}

.card.notice-g {
    background: hsl(174 45% 95%);
    border-color: hsl(174 42% 72%);
    color: hsl(174 68% 18%);
}

.card.notice-b {
    background: hsl(210 100% 97%);
    border-color: hsl(210 70% 82%);
    color: hsl(210 72% 30%);
}

/* =====================================================
   Responsive
   ===================================================== */

@media (max-width: 480px) {
    header {
        text-align: left;
        padding-left: var(--page-gutter);
        padding-right: var(--page-gutter);
    }

    header h1,
    header .subtitle {
        margin-left: 0;
        margin-right: 0;
    }

    .header-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
    }

    .header-nav a,
    .header-nav button {
        justify-content: flex-start;
        padding-left: 10px;
        padding-right: 10px;
    }
}