/* ============================================================================
   FIF@SoM — Design Tokens
   Derived from som.usm.my (Joomla + YOOtheme Pro), corrected for WCAG 2.1 AA.

   What was broken on the source site and is fixed here:
   1. Brand orange #F9591E + white text  = 3.2:1  -> fails AA for normal text.
      Fix: a darker "action" orange for anything with a text label; the bright
      brand orange is kept ONLY for large fills / the header band / big display.
   2. Muted grey #A5A5A5 on white         = 2.5:1  -> fails AA.
      Fix: --c-text-muted is #666 (5.7:1). #A5A5A5 is now borders/disabled only.
   3. Body font Roboto 300 at small sizes -> too thin to read.
      Fix: body weight is 400 (300 allowed only >= 20px display text).
   4. No consistent type scale / sizes below 13px.
      Fix: fixed rem scale below, nothing smaller than 13px, base 16px.

   Every colour pairing noted "AA" below has been contrast-checked.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------- */
  --c-brand-orange:      #F9591E; /* DECORATIVE ONLY: header band, large solid
                                     blocks, big icons, >=24px bold display.
                                     Never put small text on it. */
  --c-action:            #C24310; /* buttons, links, orange text on white.
                                     white text on this = 5.1:1  (AA) */
  --c-action-hover:      #A5380B;
  --c-action-active:     #8C2F08;
  --c-action-on-dark:    #FF7A47; /* orange for use on --c-ink backgrounds.
                                     on --c-ink = 6.6:1  (AA) */

  /* ---- Ink & neutrals -------------------------------------------------- */
  --c-ink:               #1E1F1C; /* headings + body text. on white = 15.8:1 */
  --c-text:              #1E1F1C;
  --c-text-muted:        #666666; /* captions, metadata. on white = 5.7:1 (AA) */
  --c-text-on-brand:     #FFFFFF; /* text on --c-action / --c-brand-orange fills
                                     (fill must be --c-action for normal text) */
  --c-disabled:          #A5A5A5; /* disabled text/controls only — decorative */

  /* ---- Surfaces ------------------------------------------------------- */
  --c-bg:                #FFFFFF;
  --c-surface:           #F7F7F7; /* cards, folder tiles */
  --c-surface-alt:       #F1F1F1; /* alternating rows, nested panels */
  --c-header-bar:        #1E1F1C; /* top app bar (site uses grey #717171 but a
                                     branded near-black reads cleaner + AA-safe
                                     for white nav text). Swap to #F9591E if you
                                     want the loud orange header. */
  --c-border:            #E2E2E2;
  --c-border-strong:     #C9C9C9;

  /* ---- Status (fills use dark or white text as noted) ---------------- */
  --c-success:           #2E7D32; /* text/border on white = 5.0:1 (AA) */
  --c-success-bg:        #E4F4E5; /* chip bg, pair with --c-success text */
  --c-warning:           #8A6100; /* "in review / pending" text on white = 5.2:1 */
  --c-warning-bg:        #FBEFCF; /* chip bg, pair with --c-ink text */
  --c-warning-accent:    #F5C023; /* the site's yellow — bg/border/icon ONLY,
                                     always with --c-ink text on top */
  --c-danger:            #C71C1B; /* text/border on white = 5.3:1; white text
                                     on this fill = 5.3:1  (AA) */
  --c-danger-bg:         #FBE4E4;

  /* ---- Focus ring ---------------------------------------------------- */
  --c-focus:             #C24310;
  --focus-ring:          0 0 0 3px rgba(194, 67, 16, .35);

  /* ---- Typography -------------------------------------------------------
     Display  = Oswald 500 (headings, buttons, nav, labels, table headers)
     Body     = Roboto 400 (paragraphs, form values, table cells)
     Roboto 300 permitted only for display text >= 20px.                    */
  --font-display: 'Oswald', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --fw-body:            400;
  --fw-body-strong:     500;
  --fw-display:         500;

  /* Type scale — base 16px. Do not go below --fs-xs (13px). */
  --fs-xs:    0.8125rem;  /* 13px — uppercase Oswald micro-labels, badges only */
  --fs-sm:    0.875rem;   /* 14px — metadata, secondary table text, help text  */
  --fs-base:  1rem;       /* 16px — body copy, inputs, table cells             */
  --fs-lead:  1.125rem;   /* 18px — intro paragraph, card subtitle            */
  --fs-h4:    1.25rem;    /* 20px */
  --fs-h3:    1.5rem;     /* 24px */
  --fs-h2:    1.875rem;   /* 30px */
  --fs-h1:    clamp(1.75rem, 1.2rem + 2.4vw, 2.25rem); /* 28 -> 36px */

  --lh-tight:  1.2;       /* headings */
  --lh-snug:   1.4;       /* buttons, table headers, dense UI */
  --lh-body:   1.6;       /* paragraphs */

  --tracking-caps: 0.04em; /* letter-spacing for uppercase Oswald labels */

  /* ---- Shape & spacing ------------------------------------------------ */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --tap-min:   44px;      /* minimum interactive target */
  --shadow-1:  0 1px 2px rgba(30, 31, 28, .06), 0 1px 3px rgba(30, 31, 28, .10);
  --shadow-2:  0 4px 12px rgba(30, 31, 28, .12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-brand-orange:   #F9591E;
    --c-action:         #FF7A47; /* on #1E1F1C = 6.6:1 */
    --c-action-hover:   #FF8E63;
    --c-action-active:  #FFA079;
    --c-action-on-dark: #FF7A47;

    --c-ink:            #F3F3F1;
    --c-text:           #F3F3F1;
    --c-text-muted:     #B4B4B0; /* on #171815 ~ 7:1 */
    --c-text-on-brand:  #1E1F1C;
    --c-disabled:       #6A6A66;

    --c-bg:             #171815;
    --c-surface:        #1F201C;
    --c-surface-alt:    #26271F;
    --c-header-bar:     #1F201C;
    --c-border:         #34352F;
    --c-border-strong:  #4A4B43;

    --c-success:        #6FD173;
    --c-success-bg:     #1E3A20;
    --c-warning:        #F0C452;
    --c-warning-bg:     #3A2F12;
    --c-warning-accent: #F5C023;
    --c-danger:         #F26C6B;
    --c-danger-bg:      #3A1E1E;

    --c-focus:          #FF7A47;
    --focus-ring:       0 0 0 3px rgba(255, 122, 71, .40);
  }
}

/* ============================================================================
   Base element styles — apply the tokens so you never think about it again.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-lead); }
h6 { font-size: var(--fs-base); text-transform: uppercase; letter-spacing: var(--tracking-caps); }

p { margin: 0 0 1rem; }

small, .text-sm { font-size: var(--fs-sm); }
.text-muted { color: var(--c-text-muted); }

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

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: var(--tap-min);
  padding: 0 1.15rem;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  letter-spacing: .01em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn-primary {
  background: var(--c-action);
  color: var(--c-text-on-brand);
}
.btn-primary:hover  { background: var(--c-action-hover); }
.btn-primary:active { background: var(--c-action-active); }

.btn-secondary {
  background: transparent;
  color: var(--c-action);
  border-color: var(--c-border-strong);
}
.btn-secondary:hover { border-color: var(--c-action); background: var(--c-surface); }

.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--c-surface-alt);
  color: var(--c-disabled);
  border-color: var(--c-border);
  cursor: not-allowed;
}

/* ---- Header bar ---------------------------------------------------------- */
.app-header {
  background: var(--c-header-bar);
  color: #fff;
}
.app-header a { color: #fff; }
.app-header a:hover { color: var(--c-action-on-dark); text-decoration: none; }

/* ---- Status chips ------------------------------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .15em .6em;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  border-radius: 999px;
  border: 1px solid currentColor;
}
.chip-success { color: var(--c-success); background: var(--c-success-bg); }
.chip-pending { color: var(--c-warning); background: var(--c-warning-bg); }
.chip-missing { color: var(--c-danger);  background: var(--c-danger-bg);  }

/* ---- Cards / folder tiles -------------------------------------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

/* ---- Tables --------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; font-size: var(--fs-base); }
th {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-sm);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--c-text-muted);
  border-bottom: 2px solid var(--c-border-strong);
  padding: .6rem .75rem;
}
td { border-bottom: 1px solid var(--c-border); padding: .6rem .75rem; }

/* ---- Forms -------------------------------------------------------- */
label {
  display: inline-block;
  margin-bottom: .35rem;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-sm);
  color: var(--c-ink);
}
input, select, textarea {
  font-family: var(--font-body);
  font-size: var(--fs-base);      /* 16px — also stops iOS zoom-on-focus */
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--radius-sm);
  padding: .55rem .7rem;
  min-height: var(--tap-min);
  width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--c-text-muted); }