/**
 * tokens.css — SUP Journals Theme design tokens
 *
 * Every value here is measured from the approved Figma specification
 * (SUP OJS Custom Theme → "SUP Design Feedback 1 – Validation ✅",
 * node 4669:1015). Do not invent or round values: read them from the design
 * (DESIGN_RULES.md §2).
 *
 * Tokens marked "per journal" are overridden at runtime by the theme
 * options (brand colour, accent colour, font pair) — never by editing
 * this file (THEME_RULES.md §6).
 */

:root {
	/* ---------------------------------------------------------------
	   Colour — shared by every SUP journal
	   --------------------------------------------------------------- */
	--sup-color-heading: #2E2D29;   /* display headings, navigation, issue volume */
	--sup-color-text: #43423E;      /* body copy, article titles, footer panel */
	--sup-color-muted: #767674;     /* labels, metadata, separators */
	--sup-color-subtle: #6D6C69;    /* top bar account links */
	--sup-color-quiet: #616161;     /* sidebar block text */
	--sup-color-control: #707070;   /* the label on a small outlined control */
	--sup-color-link: #006CB8;      /* inline + breadcrumb links (identical in all four journals) */
	--sup-color-surface: #FFFFFF;
	--sup-color-surface-raised: #FDFDFD;  /* sidebar cards */
	--sup-color-surface-sunken: #EAEAEA;  /* a pressed control — the open accordion */
	--sup-color-border: #D5D5D4;    /* 1px rules, card and input borders */
	--sup-color-border-strong: #979694;   /* top bar rule */
	--sup-color-rule: #CBCBCB;      /* full-width rule between homepage sections */
	--sup-color-cover-border: #D4D4D4;    /* issue cover frame */
	--sup-color-sup-red: #8C1515;   /* Stanford cardinal — SUP wordmark */

	/* Pressed control — inner shadow from the Accordion component, State=Active */
	--sup-shadow-pressed: inset -2px 2px 2px rgba(0, 0, 0, 0.2);

	--sup-color-link-strong: #00548F;   /* link hover + active */
	--sup-color-link-small: #1E6292;    /* the 12px text link — the emails of the Contact page */
	--sup-color-ink: #000000;           /* the Contact page's names, headings and numbers */
	--sup-color-disabled-bg: #EAEAEA;
	--sup-color-disabled-border: #D5D5D4;
	--sup-color-disabled-text: #C0C0BF;
	--sup-color-disabled-link: #ABABA9;

	/* ---------------------------------------------------------------
	   Colour — per journal. A journal chooses a colour family (and, where
	   the design defines more than one, the strength of its interaction
	   states) in the theme options; the theme resolves that choice into
	   these roles. The defaults below are Sky, JMSACL's family, exactly as
	   the JMSACL canvas was validated.
	   --------------------------------------------------------------- */
	--sup-color-brand: #016895;         /* a filled button */
	--sup-color-brand-hover: #4298B5;   /* a filled button on hover */
	--sup-color-brand-active: #004869;  /* a filled button while pressed */
	--sup-color-brand-dark: #004869;    /* a pressed control's border, and the accent button's focus fill */
	--sup-color-brand-border: #016895;  /* the border of a filled or outlined control */
	--sup-color-brand-border-hover: #4298B5; /* that border on hover */
	--sup-color-brand-tint: #F9FEFF;    /* light background: a focused nav link */
	--sup-color-brand-tint-hover: #F9FEFF;  /* an outlined control's background on hover */
	--sup-color-brand-tint-active: #F9FEFF; /* an outlined control's background while pressed */
	--sup-color-brand-tint-focus: #F9FEFF;  /* an outlined control's background when focused; the selected menu item */
	--sup-color-brand-tint-strong: #E3F9FF; /* a filled button's background when focused */
	--sup-color-brand-contrast: #FFFFFF;    /* text on a brand or accent fill */
	--sup-color-brand-text: #016895;        /* text in the brand's place: outlined controls */
	--sup-color-brand-text-strong: #004869; /* the accent outline's text when focused */
	--sup-color-brand-focus-text: #016895;  /* a focused filled button's text */
	--sup-color-accent: #4298B5;        /* footer rule, issue hero accents, the section CTA */
	--sup-color-accent-hover: #016895;  /* the section CTA on hover */
	--sup-color-accent-active: #016895; /* the section CTA while pressed */
	--sup-color-accent-text: #4298B5;   /* text in the accent's place: badge, outline CTA, profile links */
	--sup-color-accent-border: #4298B5; /* the outline CTA's border */
	--sup-color-focus: #004869;         /* every focus ring and focus border */

	/* The announcement note. The Announcements canvas draws each announcement
	   as a sheet of paper with a folded corner, in a warm palette of its own —
	   these five colours appear nowhere else in the design. */
	--sup-color-note-border: #D3C9B1;   /* the sheet's edge and its folded corner */
	--sup-color-note-rule: #F4EFE2;     /* the rule beside the summary */
	--sup-color-note-fold: #FEFAF0;     /* the underside of the fold */
	--sup-color-note-icon: #A59469;     /* the date's calendar */
	--sup-color-note-title: #585754;    /* the announcement's title */

	/* Form fields. The Search, Login and Register canvases draw their fields
	   from a component of their own, in black at two opacities rather than
	   in the theme's greys, with a red asterisk and a blue checkbox. */
	--sup-color-field: rgba(0, 0, 0, 0.87);        /* field stroke, label, value */
	--sup-color-placeholder: rgba(0, 0, 0, 0.54);  /* a field's placeholder */
	--sup-color-required: #FB4444;                 /* the asterisk of a required field */
	--sup-color-check: #006EF8;                    /* a ticked checkbox */
	--sup-color-check-border: #BBBBBB;             /* an empty checkbox */
	--sup-color-panel-border: #AAAAAA;             /* the search filters' frame and dash */
	--sup-color-link-field: #1E6292;               /* the small link under a field */
	--sup-color-field-focus: #BED3E3;              /* a field's 2px ring when focused (Components → Input Bar=Focus) */

	/* ---------------------------------------------------------------
	   Typography

	   The root is set to 87.5%, which is 14px at the browser's default and
	   scales with the reader's own setting. One design pixel is therefore
	   1/14rem: --sup-px holds that conversion so every token below can state
	   the Figma value directly and nothing else in the theme does arithmetic.
	   --------------------------------------------------------------- */
	--sup-px: calc(1rem / 14);

	/* Families — the typeface pairing is per journal, chosen in the theme
	   options. Defaults are source-sans-dm-sans (JMSACL); the banner face is
	   shared by every journal. */
	--sup-font-ui: 'Source Sans 3', system-ui, sans-serif;       /* body, UI, metadata, labels, breadcrumbs, footer */
	--sup-font-display: 'DM Sans', system-ui, sans-serif;        /* headings, volume, section titles */
	--sup-weight-team-heading: 600;  /* the Editorial Team's group titles, in the display face */
	--sup-weight-team-name: 600;     /* a member's name on the Editorial Team, in the display face */
	--sup-font-banner: 'Inter', system-ui, sans-serif;

	/* Weights */
	--sup-weight-regular: 400;
	--sup-weight-medium: 500;
	--sup-weight-semibold: 600;
	--sup-weight-bold: 700;

	/* Sizes — the number is the Figma pixel value */
	--sup-text-display: calc(32 * var(--sup-px));
	--sup-text-h2: calc(28 * var(--sup-px));
	--sup-text-h3: calc(24 * var(--sup-px));
	--sup-text-h4: calc(20 * var(--sup-px));
	--sup-text-lead: calc(18 * var(--sup-px));
	--sup-text-body: calc(16 * var(--sup-px));   /* reading content, navigation */
	--sup-text-ui: calc(15 * var(--sup-px));     /* submission call to action */
	--sup-text-sm: calc(14 * var(--sup-px));     /* interface default */
	--sup-text-xs: calc(13 * var(--sup-px));     /* dates, footer */
	--sup-text-xxs: calc(12 * var(--sup-px));    /* current-issue badge */

	/* Line heights — stated as ratios rather than a length per size. The
	   JMSACL canvas resolves to three, plus one for the sidebar.
	     flat     1     interface text set on its own size: 12/12, 13/13,
	                    14/14, 15/15 — buttons, links, labels, dates
	     display  1.25  every DM Sans heading (20/25, 24/30, 28/35, 32/40)
	                    and the article title, Source Sans 3 at 24/30
	     text     1.5   anything meant to be read: 13/19.5, 14/21, 16/24, 18/27
	     card     1.4   a sidebar card's heading (16/22.4) and its metadata
	                    label (14/19.6) */
	--sup-leading-flat: 1;
	--sup-leading-display: 1.25;
	--sup-leading-heading: 1.25;
	--sup-leading-text: 1.5;
	--sup-leading-card: 1.4;

	/* Letter spacing — only the footer sets one (13px × 2%) */
	--sup-tracking-footer: 0.02em;
	--sup-tracking-tight: -0.02em;       /* the small link under a field (12px × −2%) */
	--sup-leading-credit: 1.15;          /* 12/13.8 — the PKP credit in the footer */

	/* ---------------------------------------------------------------
	   Spacing
	   --------------------------------------------------------------- */
	--sup-space-1: 1px;
	--sup-space-2: 2px;
	--sup-space-4: 4px;
	--sup-space-6: 6px;
	--sup-space-7: 7px;
	--sup-space-8: 8px;
	--sup-space-10: 10px;
	--sup-space-12: 12px;
	--sup-space-14: 14px;
	--sup-space-16: 16px;
	--sup-space-18: 18px;
	--sup-space-20: 20px;
	--sup-space-22: 22px;
	--sup-space-24: 24px;
	--sup-space-25: 25px;
	--sup-space-26: 26px;
	--sup-space-28: 28px;
	--sup-space-30: 30px;
	--sup-space-32: 32px;
	--sup-space-34: 34px;
	--sup-space-38: 38px;
	--sup-space-40: 40px;
	--sup-space-42: 42px;
	--sup-space-44: 44px;
	--sup-space-52: 52px;
	--sup-space-48: 48px;
	--sup-space-56: 56px;
	--sup-space-64: 64px;

	/* ---------------------------------------------------------------
	   Layout — measured from the 1920px frames. These are fixed measures
	   rather than reading sizes, so they stay in px: a 1160px content column
	   is 1160px whatever type size the reader prefers.
	   --------------------------------------------------------------- */
	--sup-container: 1160px;          /* — large desktop */
	--sup-container-md: 952px;        /* — small desktop */
	--sup-container-sm: 728px;        /* — tablet */
	--sup-col-main: 839px;  /* — listing and issue pages */
	--sup-col-side: 320px;  /* — sidebar column */
	--sup-col-side-content: 280px;  /* — content inside the sidebar */
	--sup-col-heading: 760px;  /* — the measure a page title wraps at */
	--sup-col-prose: 700px;    /* — reading measure for editorial prose */
	--sup-col-article: 780px;  /* — article body */
	--sup-col-article-side: 380px;  /* — article metadata column */
	--sup-col-notice: 800px;   /* — the Submissions page's notice */
	--sup-col-abstract: 600px; /* — reading measure of an article's summary,
	                              abstract and keywords */
	--sup-gutter: 40px;
	--sup-page-gutter: 20px;  /* — page edge padding */
	--sup-page-end: 192px;    /* — under the last content, above the footer:
	                             Homepage, Past Issues and Issue Page frames,
	                             and every page with the native sidebar except
	                             the two of Announcements */
	--sup-col-login: 300px;    /* — the Login form */
	--sup-col-register: 316px; /* — the Register form */

	/* ---------------------------------------------------------------
	   Borders
	   --------------------------------------------------------------- */
	--sup-border-width: 1px;
	--sup-radius-sm: 2px;            /* nav buttons */
	--sup-radius: 4px;               /* outlined buttons, cards */
	--sup-radius-pill: 100px;        /* current-issue badge */
	--sup-radius-field: 3px;         /* form fields */
	--sup-radius-check: 2px;         /* checkboxes */
	--sup-field-stroke: 0.5px;       /* form fields and the search filters' frame */
	--sup-notice-stroke: 0.5px;      /* the frame of the Submissions page's notice */

	/* ---------------------------------------------------------------
	   Component metrics
	   --------------------------------------------------------------- */
	--sup-topbar-height: 34px;   /* the Top Bar of the Header, its rule included */
	--sup-masthead-top: 42px;    /* space above the logo row */
	--sup-logo-height: 64px;     /* journal logo: the tallest it is drawn */
	--sup-logo-width: 281px;     /* journal logo: the widest it is drawn */
	--sup-press-logo-width: 180px;
	--sup-navrow-height: 39px;   /* the menu row: one Navbar Button */
	--sup-footer-rule: 12px;     /* accent rule above the footer */
	--sup-cover-width: 180px;    /* current issue cover */
	--sup-cover-width-sm: 160px; /* past issue cover */
	--sup-field-height: 32px;    /* a text field on Login and Register */
	--sup-check-size: 12px;      /* a checkbox */
	--sup-select-chevron: 19px;  /* the chevron at the end of a select */
	--sup-select-padding-end: 31px;  /* 12px of padding + that chevron */
	/* A checkbox is centred on the first line of its sentence, 13/19.5 */
	--sup-check-offset: calc((var(--sup-text-xs) * var(--sup-leading-text) - var(--sup-check-size)) / 2);

	/* ---------------------------------------------------------------
	   Breakpoints — from the BREAKPOINTS page of the design file.
	   Media queries cannot read custom properties, so these are recorded
	   here as the single reference and written literally in the queries.

	     Mobile portrait    320px – 479.98px
	     Mobile landscape   480px – 767.98px
	     Tablet             768px – 991.98px
	     Small desktop      992px – 1199.98px
	     Large desktop      1200px and up
	   --------------------------------------------------------------- */
}